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你 还 在 用 Flash 吗 ? “帮主 ” 早 不 用 了 

乔布斯 生前 在 公开 信 《Flash 之 我 见 》 中 预言 : 像 HTML 5 这 样 在 移动 时 代 中 创立 的 新 标 
准 ， 将 会 在 移动 设备 上 获得 胜利 。 

一 一 国际 巨头 Google、 苹 果 等 都 支持 HTML 5 标准 ， 要 不 要 学 ， 你 看 着 办 ! 


BAT 三 巨头 都 偷偷 用 上 HTML 5 了 


HTML 5 目前 在 国内 的 发 展 达到 了 空前 的 高 度 ， 以 BAT 三 大 巨头 互联 网 公司 为 例 ， 它 
们 都 已 经 争先 恐 后 地 将 HTML 5 的 新 技术 融入 到 了 现实 的 开发 领域 中 。 本 书 的 例子 会 涉及 
WebQQ、 一 淘 网 、 大 众 点 评 网 等 公司 在 HTML 5 方向 的 技术 运用 情况 。 

一 一 还 不 知道 BAT 是 谁 ? 太 out 了 ， 百 度 、 阿 里 、 腾 讯 ， 地 球 上 的 国人 应 该 都 知道 吧 。 


HTML 5 做 了 哪些 改变 


语义 性 、 本 地 存储 、 设 备 访问 、 连 接 性 、 多 媒体 、 平 面 和 三 维 效果 、 性 能 和 集成 、CSS 3 
是 HTML 5 技术 的 核心 ， 本 书 不 光 介 绍 八大 特性 的 理论 ， 重 点 是 通过 实战 示例 让 读者 精通 
它 科 is 

一 一 世界 上 有 八大 奇迹 ，HTML 5 也 有 八大 特性 。 


本 书 真 的 适合 你 吗 


本 书 帮 你 从 HTML 4 时 代 过 渡 到 HTML 5 时 代 ， 本 书 提供 现实 生活 中 的 应 用 ， 包 括 移动 应 
用 和 普通 PC 应 用 ， 本 书 会 涉及 HIML 5 的 游戏 库 、 图 表 库 、 框 架 介绍 和 案例 ， 本 书 从 现实 的 
表单 使 用 场景 出 发 ， 解 决 低 版 本 浏览 器 的 兼容 问题 ， 本 书 介绍 各 种 W3C 规 范 来 自 什么 标准 ， 
用 向 何 处 ， 本 书 提供 多 套 作 者 自己 实际 应 用 的 跨 浏览 器 的 原生 解决 方案 。 

一 一 怕 HTML 5 不 兼容 ? 没关系 ， 本 书 给 出 了 优雅 降级 和 各 种 跨 浏览 器 兼容 方案 。 


本 书 涉及 的 技术 或 框架 

Modernizr jQuery Mobile Chrome 浏 览 器 调试 
jQuery JQ.Mobi Fiddler 加 速 
Paperjs HIML 5 Boilerplate JSONP 

WebGL Less Framework JSON 

SVG Raphael Google 地 图 
WebRTC Highcharts Swig 模 板 
Socket.IO Three.js Consolidate.js 
MVC Sublime Text 2 


Sencha Touch Node.js 
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本 书 涉及 的 示例 和 案例 

当前 天 气 的 APP WebQQ 的 通讯 

新 闻 阅 读 列表 APP 花 开花 落 的 动画 
个 网 站 的 用 户 增长 曲线 图 MP3 播 放 器 

网 页 中 的 3D 效 果 追踪 用 户 位 置 
Node.js 搭 建 Web Server 用 浏览 器 拍照 和 摄像 

销售 数据 图 表 类 iPhone 鼠标 拖 动 效果 

带 字 幕 的 视频 播放 器 文件 拖 放 上 传 

手机 定位 桌面 提醒 工具 

可 拖 放 文 本 阅读 器 微 博信 息 实时 推送 

聊天 室 在 线 代 码 编 辑 器 

排队 处 理 订 单 预览 网 页 内 容 

离线 留言 手机 遥控 PPT 

新 消息 提醒 响应 式 新 闻 阅 读 列表 

本 书 特点 


1. 本 书 不 论 是 理论 知识 的 介绍 ， 还 是 实例 的 开发 ， 都 从 实际 应 用 角度 出 发 ， 精 心 选择 开 
发 中 的 典型 例子 ， 讲 解 细致 ， 分 析 透 彻 。 

2. 深入 浅 出 、 轻 松 易 学 ， 以 实例 为 主线 ， 激 发 读者 的 阅读 兴趣 ， 让 读者 能 够 真正 学 习 到 
HTML 5 最 实用 、 最 前 沿 的 技术 。 

3. 技术 新 颖 、 与 时 俱 进 ， 结 合 时 下 最 热门 的 技术 ， 如 Node.js、 响 应 式 设计 、 移 动 开发 、 
MVC， 让 读者 在 学 习 HTML 5 的 同时 ， 了 解 熟识 更 多 相关 的 世界 先进 技术 。 对 于 一 些 无 法 全 
面 讲解 的 框架 ， 给 出 了 GitHub 的 详细 地 址 供 读 者 参考 。 

4. 贴近 读者 、 贴 近 实 际 ， 大 量 成 熟 第 三 方 组 件 和 框架 的 使 用 和 说 明 ， 帮 助 读 者 快速 找到 
问题 的 最 优 解决 方案 ， 书 中 很 多 实例 来 自作 者 工作 的 大 众 点 评 网 。 

5. 贴心 提醒 ， 本 书 根据 需要 在 各 章 使 用 了 很 多 “注意 ”、“ 说 明 ” 等 小 栏目 ， 让 读者 可 
以 在 学 习 过 程 中 可 以 更 轻松 地 理解 相关 知识 点 及 概念 。 

本 书 读者 
HTML 5 开发 初学 者 和 前 端 爱好 者 
前 端 开发 工程 师 
从 事后 端 开发 但 对 前 端 开发 有 兴趣 的 人 员 
想 把 网 站 移植 到 HTML 5 技术 上 来 的 网 页 设计 人 员 或 站 长 
大 中 专 院 校 及 培训 学 校 的 学 生 
从 HTML 4 向 HTML 5 过 渡 的 开发 人 员 

本 书 配套 源 代码 下 载 地 址 :http://pan.baidu.com/s/106wiaTk， 若 下 载 有 问题 ， 请 电子 邮件 
联系 booksaga@163.com， 邮 件 标题 为 “ 求 代码 ，HTML5 实 例 ” 
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HTML 5 引发 的 Web SS 
人 


作为 一 位 长 期 从 事 互联 网 Web 开 发 人 员 ， 在 经 历 了 早期 单一 的 Web 开 发 ， 到 现今 群雄 逐鹿 的 互联 网 标 
准时 代 后 ， 内 心 肯定 迫切 需要 一 项 统一 的 Web 标 准 。HTML 5 正 是 具备 担负 这 一 伟大 历史 使 命 的 最 佳 候选 ， 
也 正 是 它 才 能 结束 这 一 时 代 ， 开 辟 HTML 的 新 纪元 。 

从 1993 年 HTML 诞 生 以 来 ，HTML ( 超 文本 标记 语言 ) 逐渐 成 长 为 当今 网 络 应 用 最 广泛 的 语言 ， 它 的 易 用 
性 、 扩 张 性 和 与 平台 无 关 性 成 为 其 在 网 络 技术 应 用 中 的 杀手 铀 。 但 随 着 移动 互联 网 的 发 展 ， 原 有 的 技术 特性 被 消 
耗 殉 尽 ， 开 发 成 本 变 得 越 来 越 高 ， 技 术 实现 难度 越 来 越 大 。 传 统 的 Web 开 发 似乎 正在 慢 慢 从 宝座 上 褪去 光环 ;一 
点 点 被 蚕食 ， 逐 渐 沦 为 一 个 配角 。 时 间 倒 回 到 2004 年 ， 一 小 组 人 成 立 了 WHATWG ( Web Hypertext Application 
Technology Working Group，Web 超 文本 应 用 技术 工作 组 ) ， 开 始 致力 于 开发 HTML 5。2008 年 HTML 5 的 第 
一 份 草案 由 伊 恩 ' 希 克 森 撰写 。 直 到 今日 ， 经 历 了 多 年 的 发 展 和 沉淀 ， 已 经 初步 形成 以 语义 性 、 本 地 存储 、 设 备 
访问 、 连 接 性 、 多 媒体 、 平 面 和 三 维 效果 、 性 能 和 集成 、CSS 3 八大 技术 特征 为 一 体 的 新 一 代 HTML。“ 一 次 编 
写 ， 到 处 部 署 ”这 一 技术 梦想 ， 似 乎 离 我 们 已 经 越 来 越 近 ，Web 开 发 人 员 的 又 一 个 春天 即将 到 来 。 

在 HTML 5 的 发 展 过 程 中 ， 不 得 不 感谢 两 家 公司 。 第 一 家 是 乔布斯 的 苹果 公司 ，2010 年 乔布斯 公开 声 
明 封 杀 Flash， 声 称 “Flash 是 为 了 使 用 鼠标 的 PC 而 设计 的 ， 不 适用 于 用 手指 操作 的 触 屏 设备 ”， 在 苹果 的 
触 屏 设备 上 永远 不 会 出 现 Flash， 这 使 得 当下 很 多 公司 把 目光 移 向 HTML 5。 另 外 一 家 是 谷歌 ， 它 开发 和 设 
计 了 简洁 、 高 效 的 Web 浏 览 器 Google Chrome， 并 发 布 了 一 系列 以 Gmail、Google Docs 为 代表 的 互联 网 
应 用 ， 让 人 们 认识 到 原来 Web 应 用 也 可 以 如 此 的 高 效 和 丰富 。 

HTML 5 已 经 经 历 了 10 个 年 头 的 发 展 ， 但 它 不 是 一 项 新 的 技术 ， 是 对 HTML 标 准 的 改进 和 加 强 ， 现 有 的 
浏览 器 应 用 已 经 越 来 越 多 地 加 入 了 HTML 5 特性 ， 我 们 有 理由 相信 在 下 一 个 10 年 ， 它 仍旧 会 带 着 HTML 的 基 
因 成 为 网 络 霸 主 ， 让 我 们 拭目以待 。 

本 章 知识 点 : 

。 了 解 HTML 5 

。 认识 主流 浏览 器 

。 制作 简单 的 HTML 5 页 面 

。 检测 浏览 器 对 HTML 5 的 支持 情况 


1.1 你 是 不 是 真 的 了 解 HTML 5 


如 果 读 者 认为 HTML 5 是 一 项 与 传统 HTML 不 同 ， 甚 至 是 需要 从 零 开 始 学 习 的 一 项 技术 ， 
那 就 大 错 特 错 了 。HTML 5 并 没有 完全 地 颠覆 HTML， 而 是 对 HIML 一 部 分 繁 允 的 特性 进行 
简化 ， 对 不 足 的 特性 进行 补足 和 加 强 。 不 用 丢掉 以 前 HTML 的 标签 ， 也 不 需要 重新 学 习 以 往 
的 知识 ， 就 可 以 使 用 HTML 5。 举 个 简单 的 例子 ， 将 原 有 的 HTML 应 用 升级 至 HIML 5， 只 需 
要 在 每 个 文档 的 第 一 行 声明 “<!DOCTYPE html>”， 只 有 这 一 种 格式 ， 不 需要 定义 不 同 的 
DOCTYPE， 这 正体 现 了 HTML 5 化 繁 为 简 的 特色 。 
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HTML 5 的 新 特性 可 以 分 为 八大 类 ， 如 图 1.1 所 示 。 
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图 1.1 HTML 5 的 八大 特性 


虽然 HTML A 但 是 绝 大 部 分 浏览 器 已 经 实现 了 其 中 绝 大 部 分 特性 ， 


千 万 不 要 错过 这 一 技术 变革 ， 一 起 行动 起 来 ， 成 为 合格 的 HTML 5 布道 者 。 


1.1.1 通过 W3C 认 识 HTML 5 的 发 展 史 


HTML 首 次 于 1993 年 以 因特网 草案 的 形式 发 布 ， 经 历 了 2.0 版 本 、3.2 版 本 、 


4.0 版 本 直到 


1999 年 的 4.01 版 本 的 演化 和 发 展 ， 慢 慢 由 W3C 掌 握 了 HTML 的 标准 和 规范 制定 。W3C 全 称 为 


World Wide Web Consortium， 指 的 是 万 维 网 联盟 ， 于 1994 年 10 月 创建 ， 致 力 卫 


化 ， 其 中 最 著名 的 标准 规范 包括 XML、CSS、 HTML 等 
HIML 经 过 多 年 的 发 展 ， 直 到 Web 2.0 的 提出 ， 被 重新 提 到 一 个 新 的 高 度 。 


实现 Web 标 准 


传统 的 静态 网 


站 慢 慢 被 一 些 动态 网 站 所 替代 ， 其 中 最 著名 的 技术 莫 过 于 Ajax。 越 来 越 多 的 开发 者 认识 到 
通过 浏览 器 也 能 够 实现 与 PC 软件 相 媲美 的 应 用 ， 此 时 出 现 了 一 大 批 Web 2.0 的 网 站 ， 如 现今 


的 绝 大 多 数 网 站 ， 如 图 1.2 所 示 。 
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图 1.2 Web 2.0 网 站 
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Web 2.0 昌 然 美 好 ， 但 也 有 其 技术 的 局 限 性 ， 如 多 媒体 的 应 用 、 数 据 的 传输 等 方面 仍然 
显得 势 单 力 薄 ， 广 大 的 Web 开 发 者 期 盼 出 现 一 个 更 强 的 标准 ， 此 时 HTML 5 的 出 现 更 像 是 一 
剂 强 心 剂 ， 开 发 者 不 需要 丢弃 以 往 的 开发 经 验 ， 也 不 需要 重头 再 开始 学 习 ， 就 可 以 实现 以 往 
无 法 实现 的 功能 。 据 维基 百科 记录 ，HTML 5 的 前 身 是 Web Applications 1.0， 该 草案 在 2004 年 
由 WHATWG 提 出 ， 并 于 2007 年 获 W3C 接 纳 。 之 后 新 成 立 的 HTML 5 团队 在 2008 年 的 1 月 22 日 
推出 第 一 份 正式 草案 。 从 2009 年 开始 ， 各 大 浏览 器 陆续 开始 支持 HTML 5 的 部 分 特性 ， 直 到 
2012 年 12 月 17 日 ，W3C 宣 布 HTML 5 规范 正式 定稿 ， 至 此 HTML 5 修成 正果 。 可 以 通过 图 1.3 了 
解 整个 Web 技 术 变革 的 时 间 线 。 


1996 CSS1 


1991 HTAL 1994 HTMLZ JAVASCRIPT 


1997 HTMLY 


2009 HTMLS 2005 AJAX 2000 XHTML] 


图 1.3 Web 技 术 变革 的 时 间 线 


虽然 HTML 5 近 两 年 非常 火爆 ， 常 常 出 现在 人 们 的 视线 中 ， 但 任何 一 项 技术 从 出 现 到 发 
展 ， 直 到 最 后 被 广泛 接受 都 不 是 一 件 容易 的 事情 ， 期 间 需 要 度 过 种 种 困难 ， 有 些 甚至 已 经 超 
越 了 技术 自身 的 范畴 ， 尤 其 是 在 幕后 的 一 些 国际 互联 网 巨头 ， 起 到 了 至 关 重 要 的 作用 。 

近年 来 ，W3C 也 开始 出 现 一 批 国内 互联 网 公司 的 身影 ， 如 2011 年 1 月 11 日 ， 腾 讯 公司 加 
入 W3C， 将 共同 参与 包括 Web APP、HTML 5 等 新 互联 网 技术 标准 的 研究 和 制定 ，2011 年 9 月 
25 日 ， 百 度 也 加 入 W3C。 越 来 越 多 的 中 国 互联 网 公司 正在 加 入 W3C， 势 必 对 推动 HTML 5 的 
发 展 ， 尤 其 对 中 国 互 联网 的 快速 发 展 起 着 积极 的 作用 。 


1.1.2 HTML4、XHTML、HTML 5 的 区 别 


从 HTML 历 史 的 发 展 角度 来 说 ，HTML 4、XHTML、HTML 5 依次 出 现 ， 每 个 都 肩负 着 
身 的 使 命 。 

HTML 4 出 现 之 前 ， 那 是 一 个 书写 样式 非常 痛苦 的 年 代 ， 仅 有 的 部 分 样式 以 属性 的 形式 出 
现在 元 素 节 点 上 ， 文 档 的 表现 和 结构 被 完全 地 厢 合 在 一 起 ，1997 年 出 现 的 HTML 4 结束 了 这 一 
切 ， 一 个 可 以 书写 独立 样式 表 ， 结 构 和 表现 相 分 离 的 HIML 时 代 从 此 诞生 。 不 仅 如 此 ，HIML 4 
还 扩展 了 HIML 的 脚本 、 框 架 、 傣 入 对 象 、 表 格 、 表 单 ， 并 且 为 残疾 人 提供 了 访问 的 可 能 。 

XHTML 全 称 The Extensible HyperText Markup Language， 中 文 名 为 可 扩展 超 文本 置 标语 言 。 

其 1.0 版 本 在 2000 年 1 月 26 日 成 为 W3C 推 荐 标准 。XHTML 是 一 种 在 HIML 4 基础 上 进行 改进 和 优 
化 的 新 语言 ， 它 的 语法 更 加 简洁 、 更 加 严谨 。 与 HTML4 相 比 XHTML 有 如 下 区 别 〈 只 列举 部 
Ss 


要 求 所 有 的 标签 都 要 闭合 ; 

要 求 所 有 的 元 素 和 属性 名 都 必须 用 小 写字 母 ; 
要 求 标记 必须 有 合理 的 嵌 套 ; 

要 求 所 有 属性 值 必 须 用 单 引号 或 双 引 号 包括 。 


@ |HTML 5 网 页 开发 实 四 洋人 


XHTML 更 多 的 是 从 规范 角度 出 发 ， 对 HTML 4 进行 改进 和 优化 ， 一 段 完整 的 XHTML 代 
码 如 下 : 
<!DOCTYPE html> 
<html> 
<body> 
<hl>My First Heading</hl> 
<p>My first paragraph.</p> 
</body> 
</html> 


本 书 所 介绍 的 HTML 5 出 现 的 最 晚 ， 带 着 语义 性 、 本 地 存储 、 设 备 访问 、 连 接 性 、 
多 媒体 、 平 面 和 三 维 效果 、 性 能 和 集成 、CSS3 八 大 技术 特性 ， 怀 揣 着 “Write Once，Run 
Everywhere” 的 梦想 而 来 ， 又 有 苹果 和 谷歌 等 国际 互联 网 公司 的 支持 。 也 许 未 来 的 传统 PC 桌 
面 应 用 会 逐步 被 以 浏览 器 为 核心 的 网 络 和 “ 云 ” 所 替代 ， 会 有 更 多 如 Gmail 和 Google Docs 这 
样 优秀 的 Web App 诞 生 。 当 然 现 在 这 么 说 还 为 时 过 早 ， 但 不 可 否认 的 是 ， 一 场 技术 变革 正在 
开始 ， 也 许 HTML 5 不 是 最 好 的 ， 但 HTML 5 一 定 是 最 适合 这 个 时 代 的 ， 是 Web 开 发 的 必然 选 
择 。 新 一 代 的 HTML 5 语义 标签 如 图 1.4 所 示 ， 其 中 的 标签 含义 如 下 所 示 。 


header: 标记 头 部 区 域内 容 ; 
footer: 标记 脚步 区 域内 容 ; 
section: 页 面 中 的 一 块 区 域 ; 
article: 文章 内 容 ; 

aside: 相关 内 容 或 引文 ; 
naV: 导航 类 辅助 内 容 。 


<header> 


<section> 


<header> 


<nav> <article> <aside> 


<footer> 


| <footer> 


图 1.4 新 一 代 的 HTML 5 语义 标签 
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1.1.3 什么 人 应 该 学 HTML 5 


2012 年 Facebook CEO 扎 克 伯 格 跳出 来 宣布 “豪赌 HTML 5 是 Facebook 最 大 战略 错误 ”， 
似乎 预示 着 HTML 5 是 一 条 极度 漫长 且 不 平坦 的 路 ， 不 过 俗话 说 “美景 总 在 险峻 中 ”， 越 是 
险峻 的 地 方 越 是 能 领略 到 平地 上 无 法 带 来 的 感受 。 

HTML 5 虽然 在 移动 设备 或 一 些 特殊 场景 上 使 用 还 不 是 很 成 熟 ， 开 发 成 本 过 高 ， 但 这 并 
不 影响 它 带 来 重大 改变 的 事实 ， 面 对 这 样 一 次 变革 ， 开 发 人 员 所 要 做 的 就 是 怀揣 着 好 奇 之 心 
尽情 释放 自己 的 热情 去 拥抱 它 ，HTML 5 代表 着 未 来 的 趋势 ， 而 且 已 经 非常 接近 我 们 日 常 的 
开发 


图 1.5 是 第 三 方 收集 的 开发 者 学 习 HTML 5 的 调查 数据 。 


加 已经 使 用 1 年 以 上 
加 入 门 不 久 

加 正在 学 习 

加 关注 中 ， 准 备 学 习 
加 不 打算 学 习 


图 1.5 HTML 5 学 习 调 查 


如 果 是 Web 开 发 的 新 人 ， 那 么 从 最 新 的 HTML 5 版 本 开始 学 ， 比 起 从 HTML 4.01、 
XHTML 1.0 和 DOM 2 HTML 一 路 学 习 过 来 能 更 加 容易 抓 住 重点 。 然 后 可 以 再 回 过 头 重新 看 之 
前 的 HTML 版 本 ， 体 会 HTML 5 设计 者 的 良 苦 用 心 。 如 果 是 已 经 从 事 Web 开 发 的 人 员 ， 那 么 学 
习 HTML 5 无 疑 会 提升 自身 的 技术 储备 和 实力 ， 成 为 升 职 加 薪 的 硅 码 。 如 果 是 Web 开 发 的 老手 ， 
那么 HTML 5 能 重新 燃 起 对 Web 开 发 的 激情 。 

图 1.6 列 举 了 到 目前 为 止 业内 认为 HTML 5 的 优 缺 点 ， 以 便 读者 在 学 习 HTML 5 的 激动 之 余 


保持 冷静 的 态度 。 
无 需 安 准 任 何 客户 党 和 括 件 】 【移动 应 用 复杂 应 用 开发 适 代 悍 】 
多 设备 、 跨 平台 】 【开发 的 工具 和 中 间 件 不 够 成 熟 】 
多 设备 、 “人 开发 的 工具 和 中 辣 件 不 各 成熟 
人 ET 有 
开放 的 公共 标准 。 开 放 的 技术 __【 用 户 体验 不 如 原生 应 用 


图 1.6 HTML 5 优 缺 点 


@、 |HTML 5 网 页 开发 实例 详 色 


1.1.4 一 张 图 告诉 你 如 何 学 习 HTML 5 


HTML 5 的 学 习 必须 从 八大 特性 开始 入 手 ， 
点 ， 可 以 看 出 HTML 5 覆盖 面 之 广 ， 知 识 之 庞杂 。 


图 1.7 给 出 了 八大 特性 和 其 他 相关 的 知识 要 
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图 1.7 HTML 5 的 八大 特性 和 相关 知识 要 点 


读者 可 以 参考 图 
一 样 的 开发 体验 。 


1.7， 通 过 本 书 的 说 明和 示例 一 步 步 学 习 HIML 5， 体 会 HTML 5 带 来 的 不 


人 2 ”浏览 器 之 争 


SC 


最 早 的 浏览 器 Mosaic 由 美国 伊利 诺 州 的 伊利 诺 大 学 的 NCSA 组 织 在 1993 年 3 月 份 推出 ， 当 时 
还 只 能 显示 一 些 简单 的 图 片 和 图 形 。1994 年 网 景 推 出 Netscape Navigator 给 人 们 多 了 一 种 选择 。 

微软 的 正 〈 以 下 简称 正 ) 推出 后 ， 战 场 烽烟 四 起 ， 聪 明 的 微软 早期 让 正 通过 Windows 操 作 系 统 
捆绑 战略 一 举 击败 了 网 景 公 司 的 Netscape Navigator， 从 而 芮 定 了 霸主 地 位 。 面 对 微软 的 强大 危 
险 ，1998 年 网 景 公司 无 奈 将 Netscape Navigator 程 序 开源 ， 同 时 成 立 了 非 盘 利 性 的 “Mozilla 基 金 


os 第 1 章 “HTML 5 引发 的 Web 革 命 


会 (Mozilla Foundation) ”，2002 年 推出 了 Firefox。 

伴随 着 微软 操作 系统 的 快速 普及 ， 正 屡 创 新 高 ，2004 年 其 市 场 份 额 达到 历史 襄 峰 93%。 
在 此 期 间 的 2003 年 ， 苹 果 公 司 发 布 Safari 浏 览 器 。 好 景 不 长 ， 从 2004 年 后 IE 的 市 场 份额 一 步 步 
被 其 他 浏览 器 甜食 ， 直 到 2008 年 ， 谷 歌 公 司 推出 Google Chrome 浏 览 器 ， 一 路 高 歌 猛 进 ，2012 
年 5 月 ，Chrome 浏 览 器 在 全 球 范围 超过 正 ， 一 举 拿 下 霸主 地 位 。 表 1.1 罗 列 了 历年 主流 浏览 器 
市 场 份额 占 比 。 


表 1.1 历年 主流 浏览 器 市 场 份额 


1994 年 1996 年 2000 年 = 一 2006 年 2008 年 2009 年 2010 年 2011 年 2012 年 


未 出 现 | 未 出 现 | 未 出 现 未 出 现 | 091% . 
未 出 现 Ez | 3.42% % 


Opera 未 出 现 | 未 由 现 | 


[or | 
2 | ww | 和 | 了 


1.2.1 说 说 这 些 常 见 的 浏览 器 


1993 年 3 月 ，Mosaic 的 第 一 个 面向 普通 用 户 的 预览 版 本 发 布 ， 同 年 9 月 份 支持 Windows 等 
操作 系统 ， 从 此 世界 上 第 一 个 图 形 接口 浏览 器 诞生 ， 如 图 1.8 是 Mosaic 浏 览 器 的 截图 。 


图 1.8 Mosaic 浏 览 器 


1994 年 12 月 ，Netscape 浏 览 器 的 1.0 版 本 发 布 ， 但 当时 互联 网 尚未 完全 普及 ， 浏 览 器 还 属于 
一 项 比较 超前 的 科技 ， 没 有 走 进 大 众 的 生活 中 。Netscape 浏 览 器 并 没有 走 多 远 ， 当 Window 98 出 
现 以 后 ， 微 软 公司 将 正 与 操作 系统 进行 捆绑 并 免费 提供 ， 从 此 Netscape 市 场 份额 开始 下 降 ， 
终于 在 1998 年 的 11 月 将 Netscape 软 件 开 源 ， 如 图 1.9 为 Netscape 最 后 一 个 版 本 Netscape 9 的 截 
图 。 
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图 1.9 Netscape 9 浏览 器 


日 发 布 ， 从 此 一 个 大 家 最 耳熟能详 的 浏览 器 诞生 了 ， 伯 


随 


前 最 新 的 版 本 是 IE 10， 效 果 如 图 1.10 所 示 。 
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图 1.10 IE 10 浏 览 器 


代 当 


时 世界 第 一 的 浏览 器 Mosaic。2002 稀 


FMozilla 1.0 正 式 发 布 ， 之 后 升级 缓慢 ， 但 2011 年 由 于 感 


受到 Google Chrome 强 大 的 压力 ， 加 


览 器 ， 如 图 


快 了 升级 步伐 ， 从 2011 年 的 5.0 版 本 经 过 快速 迭代 升级 至 


2013 年 最 新 的 Finefox21.0 版 本 ， 不 过 市 场 份额 却 与 升级 速度 相反 ， 但 它 确实 是 一 款 优 秀 的 浏 
1.11 为 Firefox 21.0 版 本 的 截 


图 。 
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图 1.11 Firefox 21.0 


Opera 中 文 名 “ 欧 朋 ”， 从 1997 年 正式 发 布 Windows 的 2.1 版 本 后 ， 一 直 都 是 一 款 相对 低 


调 的 浏览 器 ， 不 过 近 几 年 由 于 移动 互联 网 的 兴起 和 “ 欧 朋 ” 较 早 的 进入 ，“ 欧 朋 ” 这 


慢 慢 被 大 众 所 熟 知 ， 其 优秀 的 UI 设计 和 高 效 的 性 能 一 直 是 它 多 年 来 不 变 的 特点 ， 丸 
最 新 版 本 Opera 12 的 截图 。 


© opeaiitss 计算 机 移动 “平板 电 及 


Ee 
Opera。 专 为 计 
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下 载 快速 又 免费 的 Web 普 代 浏览 器 。 
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图 1.12 最 新 版 本 Opera 12 


[图 


个 名 字 
1.12 是 


me 
发 布 首 个 测试 版 本 ，Windows 操 作 
F2012 年 的 7 月 27 号 停止 了 


@、 |HTML 5 网 页 开发 实例 详 色 
Safar 是 大 名 易 易 的 苹果 公司 开发 的 浏览 器 ， 于 2003 和 
系统 的 首 个 测试 版 本 于 2007 年 正式 发 布 ， 不 过 很 可 惜 ， 苹 果 公 司 了 
对 Windows 的 更 新 。 相 较 于 之 前 出 现 的 浏览 器 ，Safari 浏 览 器 设计 简洁 、 大 方 ， 秉 承 了 苹果 一 
贯 的 设计 理念 ， 图 1.13 为 Safari 5.1.7 的 截图 。 
‘le 
[i 


全 新 MacBook Air 


满载 动力 , 满足 你 的 一 天 。 


图 1.13 Safari5.1.7 截 图 

现 的 是 Google Chrome， 该 款 浏览 器 几乎 集结 了 以 上 所 有 浏览 器 的 特点 
后 一 路 高 歌 猛 进 ， 取 得 了 非常 做 人 的 成 绩 ， 同 时 也 成 为 像 笔 者 一 样 的 Web 前 
1.14 是 Chrome 


最 后 一 个 出 
从 2008 年 出 现 
端 人 员 和 平日 开发 调试 的 首选 ， 同 时 还 是 本 书 示 例 展 现 的 首选 浏览 器 ， 如 图 
29.0.1530.2 的 截图 。 
世子 Ohtitps://mm NM/ chir oor /webat ore, | 
@chrome a Ra 
充分 利用 网 络 


开关 人 员 和 合作 全 


xp za 
图 1.14 Chrome 29.0.1530.2 浏 览 器 
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看 完了 目前 世界 上 主流 浏览 器 的 介绍 ， 接 着 ， 对 比 各 组 浏览 器 的 性 能 数据 (数据 来 源 于 
网 站 http://sixrevisions.com) ， 图 1.15 为 JavaScript 在 各 浏览 器 运行 的 速度 对 比 ， 可 以 看 到 下 表 
现 非常 糟糕 。 


ED 

Cr 四国 :er 

L_ 下 人 II 559 
TD 20" 
© wa 


图 1.15 JavaScript 在 各 浏览 器 的 运行 速度 


图 1.16 为 浏览 器 CSS 泻 染 速 度 对 比 ，Google Chrome 的 表现 非常 突出 ， 已 经 进入 100ms 以 内 。 


i 

© glms 

© 
© M2" 


@ 17" 


图 1.16 浏览 器 CSS 泻 染 速 度 对 比 


如 图 1.17 为 浏览 器 运行 时 CPU 使 用 情况 对 比 ， 还 是 Google Chrome 表 现 最 为 出 色 。 


© 7 

© Em 3 
(上 
(IE 22% 

© + 


图 1.17 浏览 器 CPU 使 用 情况 对 比 


综合 上 述 数据 ，Google Chrome 表 现 最 佳 ， 正 最 糟糕 ， 当 然 这 只 是 目前 为 止 的 数据 ， 期 待 
未 来 各 种 浏览 器 都 有 更 出 色 的 表现 。 


1.2.2 浏览 器 的 兼容 烦恼 与 策略 


Web 前 端 开 发 是 一 项 具有 挑战 性 的 工作 ， 除 了 要 学 会 及 时 自我 更 新 世界 流行 前 端 技术 知识 
外 ， 还 要 学 会 应 对 不 同 浏览 器 的 挑战 。 截 至 目前 为 止 ， 一 般 网 站 需要 兼容 的 浏览 器 有 正 的 6、7、 


11 


@、 |HTML 5 网 页 开发 实例 详解 


8、9、10 版 本 、Opera、Mozilla Firefox、Google Chrome、Safari， 还 有 国内 基于 Tident 或 Webkit 开 发 

的 一 批 浏览 器 ， 如 邀 游 浏览 器 (Maxthon) 、360 浏 览 器 、 世 界 之 窗 (The world) 、 搜 狗 浏览 器 、TT 浏 

览 器 等 ， 可 见 ，Web 前 端 开发 并 非 表 面 看 起 来 那么 轻松 ， 而 是 一 个 相当 繁杂 的 事情 。 
Trident 是 微软 的 视窗 操作 系统 Windows 搭 载 的 网 页 浏览 器 一 一 下 的 排版 引擎 的 名 称 。WebKit 


提 _ 
| 力 玉 是 一 个 开源 的 浏览 器 引擎 ， 苹 果 的 Safari、 谷 歌 的 Chrome 浏 览 器 都 是 基于 这 个 框架 开发 的 。 
表 1.2 列 出 了 各 浏览 器 的 内 核 。 


表 1.2 主流 浏览 器 核心 


正 、 邀 游 、 腾 讯 TT、 世 界 之 窗 、360 浏 览 器 基于 Trident 内 核 | 
Safari、Google Chrome、Camino 基于 WebKit 内 核 | 
Mozilla Firefox 、Camino 基于 Gecko 内 核 


基于 Presto 内 核 


开发 者 常见 的 需要 应 对 的 浏览 器 兼容 性 分 两 种 : JavaScript 和 CSS。 


(1) JavaScript 兼 容 问 题 ， 比 如 想 要 获取 元 素 中 包含 的 所 有 文本 内 容 ， 不 同 浏览 器 获取 
方式 如 下 : 
// IE 浏 览 器 获取 方式 


document .getElementById('element') .innerText = "element text"; 
// 非 IE 浏 览 器 获取 方式 
document .getElementById('element') .textContent = "element text "7 


(2) CSS 浏 览 器 的 兼容 问题 ， 比 如 设置 元 素 透 明度 ， 不 同 浏览 器 的 实现 方式 如 下 ;: 
// IE 浏 览 器 使 用 滤 镜 实现 


filter:progid:DXImageTransform.Microsoft.Alpha (style=0, opacity=50) 

// 非 IE 浏 览 器 

opacity:0.5 

现在 的 前 端 开 发 ， 已 经 出 现 了 非常 多 的 框架 和 类 库 用 于 浏览 器 的 兼容 问题 ， 比 如 最 常见 
的 jQuery 类 库 ， 解 决 获取 元 素 中 包含 的 所 有 文本 内 容 兼 容 问 题 时 ， 可 以 使 用 以 下 语法 : 


$('#element') .text('element text'); 


平常 在 书写 样式 表 时 ， 若 要 使 用 CSS 3 中 的 各 种 特效 ， 都 需要 加 上 各 种 前 级 让 不 同 的 浏 
览 器 得 以 支持 ， 如 实现 一 个 圆 角 效果 代码 如 下 : 


border-radius: 3px; /* 贺 角 ， 水 平 半径 为 3px */ 
-moz-border-radius: 3px; /* Fierfox 浏 览 器 */ 
-webkit-border-radius: 3px; /* WebKit 核 心 浏览 器 */ 
-o-border-radius: 3px; /* Opera 浏 览 器 */ 


笔者 推荐 一 个 非常 流行 的 解决 方案 ， 使 用 Less CSS Framework 解 决 书写 样式 的 兼容 性 问 
题 ， 以 下 描述 摘 官网 : 

“LESS 将 CSS 赋 予 了 动态 语言 的 特性 ， 如 变量 、 继 承 、 运 算 、 函 数 。LESS 既 可 以 在 客户 
端 上 运行 〈 支 持 下 6+，Webkit，Firefox) ， 也 可 以 借助 Node.js 或 者 Rhino 在 服务 端 运行 。” 
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攀 。 LESS 中 国 官网 地 址 为 http://www.lesscss.net/， 读 者 可 以 参考 网 站 学 习 ， 本 书后 面 也 有 专门 的 
| 国 玲 。 章节 介绍 该 框架 。 


1.2.3 给 你 的 浏览 器 打分 
给 读者 推荐 一 个 HTML 5 评测 网 站 ， 该 网 站 用 于 测试 浏览 器 支持 HTML 5 新 特性 的 情况 ， 


评测 的 总 分 为 500 分 。 按 照 目 前 网 站 的 记录 ， 桌 面 浏览 器 排行 中 排 在 第 一 的 是 国内 六 游 浏览 
器 4.0 版 本 ， 分 数 为 476 分 ， 桌 面 浏览 器 排行 如 图 1.18 所 示 。 


Score 
Maxthon 4.0 476 
Chrome 27 463 
Opera12.10 419 
Firefox 21 399 
Safari 6.0 378 
Internet Explorer 10 Microsoft Surface and others 320 

图 1.18 桌面 浏览 器 HTML 5 特性 支持 
另外 ， 网 站 还 提供 了 手机 浏览 器 排行 榜 ， 如 图 1.19 所 示 。 

Score 
BlackBerry 10 485 
Opera Mobile 14 448 
Chrome 25 417 
Opera Mobile 12,10 406 
Firefox Mobile 19 399 
i0Ss 6.0 uch 386 
Windows Phone 8 320 
Android 4.0 ar Nexus 297 
Bada 2.0 283 
Nokia Belle FP 2 S605.5 reView and others 272 
Android 2,3 Dogie Nexus $ and others 200 


图 1.19 手机 浏览 器 HTML 5 特性 支持 


pe 


通常 ， 用 平板 电脑 浏览 网 页 的 频率 高 于 手机 ， 平 板 电脑 上 的 浏览 器 排行 情况 如 图 1.20 


所 示 。 


QHTML 5mmr&zxtrfe 


Score 
Opera Mobile 14 Android 448 
Chrome 25 417 
RIM Tablet OS 2.1 411 
Opera Mobile 12.10 406 
Firefox Mobile 19 399 
ios6.0 andiPod Touch 386 
Silk 2,2 358 
Internet Explorer 10 e and others 320 
Android 4.0 4 mmer Prime and oth 297 
webOs 3,0 ouchpad 224 


图 1.20 平板 电脑 浏览 器 HTML 5 特性 支持 


同时 ， 笔 者 还 测试 了 本 地 Google Chrome 的 HTML 5 支持 情况 ， 版 本 为 29.0.1541.0， 测 试 
结果 分 数 为 473 分 ， 评 测 如 图 1.21 所 示 。 


图 1.21 Google Chrome 29.0.1541.0 评 分 


国内 很 多 新 兴 的 浏览 器 厂家 经 常用 支持 HTML 5 的 评分 制造 嗓 头 ， 但 是 ， 一 款 优秀 的 浏 
览 器 不 只 能 一 味 求 新 。 在 给 浏览 器 评分 时 ， 还 需要 针对 于 多 个 方面 进行 比较 ， 如 脚本 执行 、 
页 面 泻 染 、 安 全 性 、 易 用 性 ， 这 些 基 础 功能 ， 尤 其 在 当今 ， 用 户 经 常 采 用 浏览 器 进行 电子 购 
物 消费 ， 安 全 性 显得 尤其 重要 。 希 望 国 内 浏览 器 厂商 能 在 这 方面 下 更 多 的 功夫 ， 为 建设 安全 
的 网 络 平台 打下 坚固 的 基石 。 


全 3 学习 制作 简单 的 HTML 5 页 面 


a 


HTML 5 有 种 类 丰富 的 语义 结构 新 标记 ， 除 了 与 块 元 素 有 很 多 相似 性 外 ， 还 拥有 自身 的 
语义 行为 。 在 制作 一 个 HIML 5 页 面 时 ， 首 先 要 告知 浏览 器 使 用 何 种 HIMIL 或 XHTML 规范 ， 
在 HTML 5 出 现 之 前 ， 经 常 看 到 宛 长 的 规范 语法 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
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HTML 5 简化 了 这 一 约定 ， 而 且 不 区 分 大 小 写 ，DOCTYPE 如 下 : 
<!DocTYPE htmil> 


下 面 先 通过 一 张 截图 观察 简单 的 HTML 5 页 面 ， 如 图 1.22 所 示 。 


回 


HTML 5 


什么 是 HTML 5 


HTML 5 新 标签 标签 


HTML5 


通过 制定 如 何 处 理 所 有 HTML 元 素 以 及 如 何 从 描 误 中 恢复 的 精确 规则 ，HTML 5 改进 了 互 搁 作 性 ， 并 孔 少 了 
开发 成 本 。HTML5 还 包含 了 新 的 元 素 ， 比 如 : 


友情 链接 


1.22 简单 的 HTML 5 页 面 


通过 一 张 页 面 结构 示意 图 查看 页 


回 


础 构造 ， 如 图 1.23 所 示 。 


主 内 容 侧 边栏 


页 县 


司 1.23 页 面 基 础 构造 


页 面 被 分 为 6 个 区 域 ， 分 别 为 : 标题 、 导 航 、 介 绍 、 主 内 容 、 侧 边栏 、 页 脚 。 
(1) 页 面 基础 结构 代码 如 下 : 


01 <!doctype html> 
02 <html> 
03 <head> 


于 
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14 
15 
16 
于 


<title> 简 单 的 HTML 5 页 面 </title> 
<link rel="stylesheet" href="../css/blog.css" type="text/css" /> 


<!- 页 面 依赖 样式 表 --> 


</head> 

<body> 
<header> <i== 标题 二 > 

<h1l>HTML 5</h1> 

</header> 
<nav></nav> i 
<section class="intro"></section> <!1-- 介绍 --> 
<section class="mainContent"></section> <!-- 主 内 容 --> 
<aside></aside> <!-- 侧 边栏 --> 
<footer></footer> <Ye > 

</body> 

</html> 


(2) 导航 区 域 可 以 使 用 HTML 5 或 者 XHTML 结 构 ， 一 个 无 序 的 UL 列表 ， 关 键 是 该 列表 
必须 放 在 nav 标 签 内 部 ， 导 航 列表 代码 如 下 : 


01 
02 
03 
04 
05 
06 


<ul> 
<li class="selected"><a href="#"> 博 客 </a></1i> 
<1i><a href="#"> 关 于 </a></1i> 
<1i><a href="#"> 联 系 </a></1i> 
<1i class="subscribe"><a href="#">RSS</a></1i> 
</ul> 


(3) 介绍 区 域 使 用 了 section 标 签 ， 并 添加 了 名 为 intro 的 样式 类 ， 同 时 还 在 内 部 添加 
header 标 签 ， 用 于 表示 介绍 区 域 的 个 体 标 题 ， 这 里 可 以 看 出 header 的 用 法 ， 除 了 在 整个 文档 中 
使 用 之 外 ， 还 能 在 局 部 的 section 区 域 中 使 用 ， 介 绍 区 代码 如 下 : 


01 


06 
07 


<section class="intro"> 
<header> 
<h2> 什 么 是 HTML 5</h2> 
</header> 
<p>HTML 5 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1 .0 标准 的 HTML 标 准 版 
本 ， 现 在 仍 处 于 发 展 阶段 ， 但 大 部 分 浏览 器 已 经 支持 某 些 HTML 5 技术 。</p> 


</section> 


(4) 主 内 容 区 同样 使 用 了 section 标 签 ， 由 于 内 容 显示 的 是 博客 的 文本 ， 所 以 在 内 部 添加 
一 层 article 标 签 的 嵌 套 ， 代 码 如 下 : 


01 <section class="mainContent"> 


02 
03 
04 
05 
06 
07 
08 
09 
10 


<article class="blogPost"> 


<header> 
<h2>HTML 5 新 标签 </h2> 
<p> 
时 间 <time datetime="2013-7-1">2013-7-1</time> 
作者 <a href="#"> 小 周 </a> 
</p> 
</header> 


<p> 通 过 制定 如 何 处 理 所 有 HTML 元 素 以 及 如 何 从 错误 中 恢复 的 精确 规则 ， 
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有 HTML 5 改进 了 互 操作 性 ， 并 减少 了 开发 成 本 。HTML 5 还 包含 了 新 的 元 素 ， 
比如 : <nav>，<header>，<footer> 以 及 <figure> 等 等 。</p> 
13 </article> 


14 </section> 


(5) aside 标 签 通常 定义 主体 之 外 的 内 容 ， 但 是 又 与 附近 内 容 相 关 ， 一 般 会 用 于 填充 一 
些 不 同 分 类 的 内 容 ， 本 例 使 用 aside 标 签 制作 侧 边栏 ， 放 置 文章 分 类 的 标签 ， 代 码 如 下 : 


01 <aside> 


02 <section> 

03 <header> <-- 标题 --> 

04 <h3> 标 签 </h3> 

05 </header> 

06 <ul> 

07 <1i><a href="#">HTML 5</a></1i> <-- 分 类 内 容 --> 
08 </ul> 

09 </section> 


10 </aside> 


(6) 最 后 一 块 内 容 是 footer 标 签 所 表示 的 页 脚 ， 通 常 出 现在 section 或 者 document 的 尾 
部 ， 可 包含 一 些 与 站 点 或 者 内 容 相关 的 信息 ， 如 作者 信息 、 站 点 导航 、 友 情 链接 等 ， 本 例 所 


的 footer 代 码 如 下 : 
01 <footer> <-- 页 面 页 脚 --> 
02 <div> 
03 <section id="about"> 二 
04 <header> 
05 <h3> 关 于 </h3> 
06 </header> 
07 <p> 关 于 内 容 </p> 
08 </section> 
09 <section id="blogroll"> <-- 友情 链接 --> 
10 <header> 
i <h3> 友 情 链 接 </h3> 
12 </header> 
13 <ul> 
14 <1i><a href="#"> 大 众 点 评 网 </a></1i> 
15 </ul> 
16 </section> 
上 <section id="popular"> <-- 相关 流行 内 容 --> 
18 <header> 
19 <h3> 流 行 </h3> 
20 </header> 
2 <ul> 
2 <1i><a href="#"> 流 行内 容 </a></1i> 
23 </ul> 
24 </section> 
25 </div> 


26 </footer> 


HTML 5 的 到 来 使 得 浏览 器 更 容易 实现 复杂 布局 ， 开 发 人 员 可 以 使 用 更 少 的 时 间 去 实现 


SS |HTML 5 网 页 开发 实例 详解 


Hl 


以 前 的 功能 ， 同 时 可 以 将 节约 下 来 的 时 间 去 学 习 一 直 被 前 端 开 发 者 忽略 的 
优化 、 前 端 架构 等 。 


情 ， 如 前 端 性 能 


1.3.1 搭建 开发 HTML 5 的 浏览 器 环境 


HTML 5 是 传统 HIML 的 扩展 和 延伸 ， 所 以 与 传统 的 开发 方式 基本 相同 ， 笔 者 在 Web 开 发 
时 ， 通 常 有 三 件 工具 不 可 或 缺 : 舒服 的 编辑 器 、 强 大 的 浏览 器 和 代理 工具 。 
1. 舒服 的 编辑 器 
在 编辑 器 的 选择 上 ，Web 前 端 开发 自由 度 是 非常 高 的 ， 即 使 是 文本 文档 编辑 器 也 可 以 
作为 Web 开 发 的 工具 ， 但 是 为 了 提高 开发 效率 ， 还 是 要 选择 一 款 功能 强大 且 流 行 的 编辑 器 。 


笔者 推荐 的 是 近年 来 席卷 前 端 界 的 Sublime Text， 一 款 独 具 个 性 的 高 级 编辑 器 ， 如 图 1.24 是 
Sublime Text 编 辑 器 的 截图 。 


国 Demonstration - Sublime Text 2 es 
Eile Edit Selection Find Vew Goto Iools Project Preferences Help 


( 


src_idx = 有 
dst_idx = ©; 
{3 (src_idx + 2) < len; src_idx += 3, 


s8 = datalsrc_idx]; 
sl = datalsrc_idx + 1]; 
5s2 = datalsrc_idx + 2]; 


dst[dst_idx + 0] = charset[(s0 5 ) >> 2]; 
dst[dst_idx + 1] = charset[((s0 5 ) <<4) | ((s15 
dst[dst_idx + 2] = charset[((s1 & ) <<2) | (s26 
dst[dst_idx + 3] = charset[(s2 5 )1; 


(src_idx < len) 


5S8 = datafsrc_idx]; 
sl = (src_idx + 1 < len) ? datalsrc_idx + 1] : 0; 


dstldst_idx++] = charset[(s® 5 gxfc) >> 2]; 
charset[((59 & <<4) | ((s16 


len) 
dst[dst_idx++] = charset[((s1 & ) << 2)]; 


图 1.24 Sublime Text 编 辑 器 


Sublime Text 支 持 目前 主流 的 操作 系统 ， 如 Windows、 Mac、Linux， 包 括 32 位 和 64 位 ， 同 
时 支持 各 种 流行 编程 语言 的 语法 高 亮 、 代 码 补 全 等 。 该 款 编辑 器 插件 相当 丰富 ， 同 时 版 本 更 
新 快 。 非 常 棒 的 一 点 是 编辑 器 右边 没有 滚动 条 ， 取 而 代 之 的 是 代码 缩 略 图 。Sublime Text 是 款 
收费 软件 ， 不 过 目前 为 止 可 以 无 限期 的 使 用 。 


国生 。 Sublime Text 还 有 更 多 意 想不到 的 强大 功能 ， 读 者 可 以 自行 下 载体 验 ， 编 辑 器 下 载 地 址 为 


二 http://www.sublimetext.com/3。 


2. 强大 的 浏览 虽 
开发 调试 所 使 用 的 浏览 器 ， 笔 者 一 般 选择 Google Chrome， 这 个 在 前 面 已 经 提 过 ， 选 择 


的 原因 


是 该 款 浏览 器 出 


具 ， 如 
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1.25 Google Chrome 浏览 器 开发 模式 


3. 代理 工具 


色 的 脚本 执行 速度 和 页 面 泻 染 能 力 ， 同 时 还 集成 了 强大 的 开发 调试 工 
图 1.25 为 该 浏览 器 开发 者 模式 的 截图 。 


© | btsps:/ wm. sooele. 


| 


第 三 样 工具 是 请 求 代理 工具 ， 这 里 将 介绍 Windows 操 作 系统 上 的 Fiddler 软 件 ， 如 图 1.26 


所 示 。 


ew Help GET /book 
加 和 Beplay XResume | 昌 Strem 注 Decoae Keep; Ni sassions 图 Any Process 掀 Tind 好 se 凯 大 Brorse - 了 | 
民 一 一 Po 一 本 conposer | 口 he | 器 bo | 三 rmene 
9 © seatstcs | B Inspectors | £ MutoResponder 


SeJect one or more sessions 1n the Web 
Sessions Tist to Yiew performance 
Statistics, 


Bullding Swebsire oF mdile pp 

Kendo UI 1s a comprehensive HTMLS & 
Javascript framework for professional web 
and mobile developers. 

Get your free ra today! 


图 1.26 Fiddler 软 件 


虽然 Fiddler 主 要 的 功能 是 数据 包 抓 取 ， 不 过 开发 时 常常 用 于 请 求 代理 ， 如 图 


Fiddler 代 理 的 原理 图 


1.27 为 
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图 1.27 Fiddler 代 理 的 原理 题 


接着 ， 举 


个 代理 使 用 的 例子 ， 需 求 是 将 大 众 点 评 网 首页 代理 到 谷歌 搜索 首页 ， 即 将 网 


址 http://www.dianping.com 代 理 到 http://www.google.com 网 址 上 ，Fiddler 配 置 如 图 1.28 所 示 。 


在 通常 的 开 


1.28 Fiddler 代 理 配置 


发 情况 下 ， 一 般 不 会 将 整个 页 面 地 址 代理 到 另外 一 个 地 址 上 ， 而 是 代理 一 些 


样式 表 或 者 脚本 用 于 本 地 调试 开发 。 

最 基本 的 开发 环境 就 介绍 到 这 里 。Web 开 发 还 有 很 多 优秀 的 工具 ， 可 以 提高 开发 速度 和 
测试 效率 ， 比 如 性 能 测试 方面 的 DynaTrace Ajax Edition、JavaScript 规 范 工具 JSLint、 正 测试 工 
具 IETest 等 等 ， 读 者 可 以 根据 开发 习惯 和 喜好 选择 合适 的 工具 。 


1.3.2 检测 浏览 器 是 否 支持 HTML 5 标签 
在 开发 HTML 5 应 用 时 ， 为 了 实现 浏览 器 的 兼容 性 ， 需 要 对 一 些 不 支持 新 特性 的 浏览 器 


做 优雅 降级 ， 


的 是 为 了 尽 可 能 使 用 户 体验 更 加 顺畅 ， 这 时 候 就 需要 对 不 同 的 浏览 器 做 功能 


检测 ， 通 常 有 几 种 方法 可 以 检测 是 否 支 持 HTML 5 标签 ， 如 原生 的 标签 兼容 提示 、 浏 览 器 检 
测 、 特 征 检测 等 。 


1. 原生 的 标签 兼容 提示 


首先 看 原生 标签 提示 ， 当 浏览 器 遇 到 一 些 无 法 识别 的 标签 时 ， 只 会 将 其 作为 一 个 普通 文 
本 节点 进行 展现 ， 如 HIML 5 中 的 canvas 标 签 ， 下 面 通过 一 个 简单 的 实例 对 比 支持 与 不 支持 浏 
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览 器 的 区 别 ， 示 例 代码 如 下 : 


<! 
<h 


</ 
先 


doctype html> 


tml> 
<title>Canvas</title> 
<body> 
<canvas style="background-color:red"> 该 浏览 器 不 支持 canvas</canvas> 
</body> 
html> 


支持 canvas 标 签 的 Google Chrome 浏 览 器 打开 该 文件 ， 可 以 看 到 该 标签 能 够 正常 显 


示 ， 效 果 如 图 1.29 所 示 。 再 用 不 支持 canvas 标 签 的 IE 8 打开 文件 ， 页 面 上 显示 “该 浏览 器 不 支 
持 canvas” 提 示 信 息 ， 效 果 如 图 1.30 所 示 。 


图 1 


2. 


Vindows Internet Explorer 


tS 同 9 种 eeve hiall P 司 | 浅 | 轩 Ceaves 
字 GC 口 /第 1 章 /canvas.html Tr i 一 一 一 一 
| ”| 全 - 目 - 呈 同 - 而 -安全 6)- 工具 0)- ” 
该 浏览 器 不 支持 canvas 


D cowss 


.29 Google Chrome 浏 览 器 打开 网 页 文件 图 1.30 IE 8 浏览 器 打开 网 页 文件 


浏览 器 检测 


另外 一 种 常用 的 检测 手段 是 用 浏览 器 检测 ， 主 要 原理 是 : 先 判断 浏览 器 的 类 型 和 版 本 ， 然 


01 
02 


二 
12 


该 


后 在 知晓 该 类 型 版 本 浏览 器 支持 的 情况 下 进行 操作 ， 下 面 通过 一 个 示例 代码 介绍 如 何 实现 ， 


<!doctypPe html> 
<html> 
<title> 浏 览 器 检测 </title> 
<body><canvas style="background-color:red"></canvas></body> 
/* canvas 标 签 */ 
<script> 
Var ua = navigator.userAgent.toLowerCase(),ie; 
/* 获取 浏览 器 User Agent */ 


if (ie = ua.match(/msie ([\d.]+)/)) { /* 使 用 正则 获取 IE 相关 信息 */ 
Ve Tero /* 向 右 位 移 2 位 转 为 整 型 */ 
Ee oe /* 是 否 是 IE9 以 下 版 本 */ 


document .body.innerHTML = ' 该 浏览 器 不 支持 canvas'; 
al 
</script></html> 


示例 运行 效果 与 上 一 个 示例 效果 相同 。 示 例 开始 先 获取 浏览 器 的 User Agent，User 
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Agent 是 HTTP 协 议 中 头 信息 的 一 部 分 ， 用 来 告诉 服务 器 客户 端 是 什么 浏览 器 ， 以 及 操作 系统 
等 的 信息 。 通 过 分 析 User Agent 获 取 浏 览 器 的 类 型 和 版 本 信息 ， 对 不 支持 的 浏览 器 采取 错误 提 
示 。 用 浏览 器 检测 这 个 方案 看 上 去 相当 完美 ， 不 过 有 几 个 致命 的 缺点 : 

。 User Agent 可 以 伪造 ， 很 多 浏览 器 支持 用 户 修改 User Agent 信 息 o 

。 因 不 断 更 新 的 浏览 器 版 本 ， 需 要 同步 更 新 检测 信息 。 

3.， 特征 检测 


最 后 介绍 的 一 种 方案 应 该 是 最 完美 的 ， 一 般 称 为 特征 检测 ， 即 通过 判断 特定 的 对 象 、 属 
性 、 方 法 、 行 为 确认 功能 是 否 可 以 使 用 ， 下 面 通过 示例 介绍 该 方法 的 使 用 ， 代 码 如 下 : 


01 <!doctype html> 


02 <html> 

03 <title> 特 征 检 测 </title> 

04 <body></body> 

05 <script> 

06 Var canvas = document -createElement ('canvas'); 

07 if (_canvas.getContext) { 

08 document .body.innerHTML = '<canvas style="background-— 
color:red"></canvas>'; 

09 } else { 

10 document .body .innerHTML = ' 该 浏览 器 不 支持 canvas'; 

11 i 

pe </script> 

13 </html> 


该 段 示 例 运 行 效果 与 首 段 示例 “原生 标签 提示 ”效果 相同 。 

代码 第 6 行 创建 一 个 canvas 标 签 元 素 ， 然 后 在 第 7 行 通过 获取 新 创建 canvas 元 素 的 
getContex 属 性 判断 是 否 存在 ， 当 存在 该 属性 时 表示 浏览 器 支持 canvas 元 素 。 特 征 检测 的 优势 
在 于 ， 开 发 者 不 需要 了 解 浏览 器 的 支持 情况 ， 而 是 通过 直接 检测 特性 是 否 支持 。 


1.4 “常见 问题 


从 HTML 5 问世 以 来 ， 开 发 者 就 一 直 期 待 新 带 来 的 特性 能 解决 以 往 Web 开 发 中 不 能 逾越 的 
问题 ， 事 实 上 HTML 5 确实 解决 了 开发 者 很 多 现实 问题 ， 但 同时 也 存在 着 部 分 暂时 无 法 实现 
的 功能 ， 如 : 


本 地 存储 数据 安全 性 ; 
性 能 问题 ; 

离线 存储 同步 问题 ; 
直播 视频 。 
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不 过 笔者 相信 ， 上 述 的 一 些 问题 在 不 久 的 将 来 都 将 被 克服 ，HITML 5 将 会 出 现在 一 个 更 


大 的 舞台 上 。 


1.4.1 学 好 HTML 5 要 先 学 好 Java 吗 


Web 开 发 设计 的 知识 点 和 技术 比较 庞杂 ， 很 多 刚 入 门 的 新 手 对 各 种 知识 点 的 认识 和 把 握 
不 到 位 ， 容 易 引起 误会 ， 首 先 看 两 种 技术 的 官方 解释 。 


。 HTML 5: 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标 准 的 HIML 标准 版 本 ， 
用 于 强化 Web 网 页 的 表现 性 能 ， 包 括 HTML、CSS 和 JavaScript 在 内 的 一 套 技术 组 合 。 

。 Java: 是 个 简单 、 面 向 对 象 、 分 布 式 、 解 释 性 、 健 壮 、 安 全 与 系统 无 关 、 可 移植 、 高 
性 能 、 多 线程 和 动态 的 语言 。Sun Microsystems 公 司 于 1995 年 5 月 推出 ， 由 Java 编 程 语 
言 、Java 类 文件 格式 、Java 虚 拟 机 和 Java 应 用 程序 接口 4 个 方面 组 成 。 


通过 概念 可 以 看 出 ， 学 习 HTML 5 与 学 习 Java 没 有 必要 的 关联 关系 。 但 作为 开发 人 员 ， 


通过 学 习 后 端 开发 语言 Java， 有 助 


加 深 对 前 端 开 发 的 认识 ， 如 面向 对 象 、 设 计 模 式 的 应 用 


等 ， 同 时 还 能 知晓 完整 的 Web 开 发 周期 所 经 历 的 步骤 和 过 程 ， 所 以 表面 上 看 技术 之 间 干 差 万 
别 ， 但 又 密 不 可 分 。 除 此 之 外 ， 前 端 人 员 还 可 以 补充 如 数据 库 、 服 务 器 开发 方面 的 知识 ， 对 


后 的 日 常 开发 会 起 到 事半功倍 的 效果 。 如 图 1.31 给 出 了 前 端 开发 的 知识 体系 。 


me 


面向 对 象 / 切 而 山 各 | [过 
函数 式 秽 各 站 编程 理 作 | 


设计 模式 


二 | | 第 三 方 服务 上 
ople 


\ EE i Sublise Text 


| 


| 能 恪 测 


图 1.31 前 端 开 发 知识 体系 题 
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1.4.2 谁 是 HTML 5 新 规则 下 的 牺牲 品 


从 2006 年 开始 ， 富 互联 网 应 用 进入 如 火 如 茶 的 白热化 战争 ， 各 种 富 应 用 技术 百家争鸣 ， 
如 Adobe Flex、JavaFX、SilverLight 等 ， 一 时 之 间 让 开发 者 不 知 如 何 选择 。 各 种 常见 的 富 应 
如 下 。 


。 Adobe Flex: 由 Macromedia 公 司 在 2004 年 3 月 发 布 ， 基 于 其 专 有 的 Macromedia Flash 平 
台 ， 支 持 富 应 用 开发 和 部 署 的 技术 组 合 。 

。 JavaFX: 由 Sun 公 司 开发 的 一 种 声明 性 的 、 静 态 类 型 脚本 语言 ， 开 发 富 互 联网 应 用 程 
序 。 

。 SilverLight， 融 合 了 微软 多 种 技术 的 Web 呈 现 技术 ， 提 供 了 一 套 开 发 框架 ， 并 通过 使 
用 基于 向 量 的 图 像 图 层 技 术 ， 支 持 任何 尺寸 图 像 的 无 颖 整合 ， 对 基于 ASPNET、Ajax 
在 内 的 Web 开 发 环境 实现 了 无 颖 连接 。 


学 习 任 何 一 门 技 术 都 将 投入 大 量 的 时 间 和 精力 ， 包 括 笔 者 在 内 的 多 数 Web 开 发 人 员 ， 急 
切 需要 一 种 类 似 于 HTML 的 升级 方案 。 终 于 ，HTML 5 的 第 一 份 正式 草案 于 2008 年 1 月 22 日 公 
布 ， 虽 然 还 不 是 很 完善 ， 且 浏览 器 支持 情况 不 同 ， 但 还 是 让 人 看 到 了 希望 。 以 JavaScript、 
CSS、HTML 为 基础 的 三 剑客 ， 似 乎 又 将 再 续 辉 煌 。 

与 其 他 的 技术 相 比 ，HTML 5 有 自己 的 优势 ， 如 : 


。 用 户 可 以 不 用 再 安装 和 更 新 浏览 器 上 的 各 种 插件 。 
。 即时 的 更 新 ， 不 需要 升级 安装 ， 只 需要 刷新 网 页 。 
。 跨 域 设备 和 平台 。 


公开 的 标准 ， 由 W3C 推 出 。 
良好 的 SEO 支持 ， 更 容易 被 搜索 引擎 收纳 。 
2013 年 ， 越 来 越 多 的 网 站 开发 使 用 一 部 分 HTML 5 技术 ， 相 信 未 来 HTML 5 会 给 大 家 带 来 
更 大 的 想象 空间 。 


1.4.3 HTML 5 是 否 有 未 来 


从 HTML 5 诞生 这 日 起 ， 笔 者 就 一 直 认 为 它 的 前 途 将 一 片 光明 ， 由 HTML 5 作为 HTML 的 
种 补足 更 加 的 自然 、 顺 畅 。 
近 些 年 来 ， 业 内 涌现 了 一 大 批 使 用 HTML 5 开发 的 应 用 ， 涵 盖 了 视频 、 游 戏 等 各 方面 ， 
下 面 通过 笔者 搜寻 的 一 些 例 子 向 大 家 展现 HTML 5 取得 的 成 就 。 
游戏 Cut The Rope 〈 割 绳子 ) ， 苹 果 iOS/Android 平 台 上 一 款 非 常 受 欢 迎 的 休闲 游戏 ， 如 
图 1.32 是 该 款 游戏 的 网 页 版 ， 使 用 HTML 5 编写 ， 支 持 Google Chrome、Safari、Firefox、IE 9+ 
等 。 
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CUTROPE 


2 


图 1.32 HTML 5 版 “ 割 绳子 ”游戏 界面 


网 页 版 没有 触 控 支 持 ， 其 他 效果 与 手机 上 基本 没有 区 别 ， 尤 其 在 Google Chrome 浏 览 器 上 
表现 非常 出 色 ， 游 戏 网 址 为 http://www.cuttherope.ie/。 

再 推荐 一 款 HTML 5 应 用 Google Body， 展 现 的 是 一 个 3D 人 体 模型 ， 用 户 可 以 剥离 各 个 解 
剖 层 ， 放 大 并 定位 至 感 兴 趣 的 部 位 ， 单 击 即 可 获悉 具体 解剖 结构 ， 或 者 搜索 肌肉 、 器 官 、 骨 
骼 及 更 多 构造 了 解 详情 。 (浏览 器 需 支持 WebGL ) ， 网 址 为 http://www.zygotebody.com/。 图 
1.33 为 Google Body 应 用 的 截图 。 


WebGL 是 一 种 3D 绘 图 标准 ， 这 种 绘图 技术 标准 允许 把 JavaScript 和 OpenGL ES 2.0 结 合 在 一 
| 里 未 起 ， 通 过 增加 OpenGL ES 2.0 的 一 个 JavaScript 绑 定 ，WebGL 可 以 为 HTML 5 Canvas 提 供 硬件 

3D 加 速 泻 染 ， 这 样 Web 开 发 人 员 就 可 以 借助 系统 显卡 来 在 浏览 器 里 更 流畅 地 展示 3D 场 景 和 模 
型 了 ， 还 能 创建 复杂 的 导航 和 数据 视觉 化 〈 摘 自 百 度 百科 ) 。 


zasrtEBODY- Gam 


«a 


图 1.33 Google Body 应 用 界面 
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目前 ， 市 面 上 的 HTML 5 应 用 非常 丰富 ， 但 有 很 大 一 部 分 的 应 用 处 于 演示 阶段 ， 不 过 在 
可 以 预见 的 将 来 HTML 5 有 无 限 的 可 能 性 ， 原 本 单一 的 浏览 器 环境 正在 慢 慢 变 得 多 元 化 。 
时 ， 大 量 高 级 HTML 5 游戏 引擎 出 现 ， 更 加 丰富 了 原 有 Web 开 发 人 员 的 多 元 性 ， 越 来 越 多 开 
者 把 目光 放 在 HTML 5 身上 ， 可 以 很 肯定 地 说 ，HTML 5 王朝 正在 崛起 ， 新 的 帝国 正在 崛起 。 


1.4.4 HTML 5 在 移动 应 用 开发 是 否 有 前 景 


2012 年 的 9 月 12 日 ， 对 于 HTML 5 开发 者 是 一 个 莫大 的 打击 ，Facebook CEO 扎 克 伯 格 参 加 
了 TechCrunch Disrupt 大 会 ， 接 受 了 阿 灵 顿 (Michael Arington) 的 采访 ， 指 出 可 能 犯 的 最 大 错 
误 就 是 “在 HTML 5 上 下 赌注 太 多 ， 在 本 地 程序 下 注 太 少 。”， 之 后 ， 美 国 第 二 大 社交 网 站 
LinkedIn 也 宣布 放弃 HTML 5， 而 改 用 原生 代码 来 实现 ， 总 结 起 来 原因 大 致 如 下 : 


。 应 用 占 内 存 过 大 。 
。 没有 原生 应 用 性 能 好 ， 如 旋转 、 滚 动 效 果 。 
。 周边 配套 调试 工具 少 ， 优 化 困难 。 


在 国内 ， 情 况 更 加 复杂 ， 网 络 访问 速度 成 为 更 大 的 障碍 。 虽 然 ，HTML 5 有 离线 缓存 ， 
同时 很 多 大 型 公司 也 在 优化 HTTP 协 议 或 者 开发 更 快 的 新 协议 ， 但 就 目前 来 说 HTML 5 离 移 
动 商业 化 还 有 一 段 距 离 。 但 是 ， 在 HTML 5 的 身上 笔者 看 到 了 当年 JavaScript 的 影子 。 早 期 的 
JavaScript 被 用 在 表单 验证 ， 后 来 泛滥 为 制作 漂浮 广告 等 一 些微 不 足 道 的 地 方 ， 但 俗话 说 是 金 
子 总 会 发 光 ， 现 在 的 JavaScript 已 然 是 浏览 器 端的 霸主 ， 截 止 目前 JavaScript 已 经 是 排行 前 十 的 
语言 ， 如 图 1.34 为 2013 年 1 月 份 的 编程 语言 排行 榜 。 


涉 可 


图 1.34 2013 年 1 月 编程 语言 排行 


移动 基于 原生 开发 与 HIML 5 如 同 当年 的 PC 本 地 应 用 之 与 浏览 器 。 计 算 机 诞生 之 初 ， 网 
络 还 没有 广泛 普及 ， 当 时 的 人 们 使 用 软盘 或 者 光盘 的 方式 进行 大 数据 传输 。 随 后 ， 互 联网 的 
普及 与 浏览 器 的 出 现 ， 打 破 了 操作 系统 本 地 应 用 的 神话 ， 越 来 越 多 的 本 地 应 用 被 搬 上 浏览 
器 ， 浏 览 器 更 像 是 一 个 即时 更 新 的 操作 系统 。 设 想 一 下 未 来 操作 系统 的 样子 ， 在 网 络 速度 足 
够 快 的 环境 ， 所 有 的 数据 都 将 存储 在 云端 ， 可 以 通过 任何 形式 的 终端 共享 数据 ， 平 日 的 应 用 
都 可 以 通过 浏览 嚣 完成， 操作 系 统 将 变 得 越 来 越 轻 量 级 ， 不 管 在 何 时 、 何 地 都 能 畅快 地 进行 
分 享 、 办 公 ， 也 许 这 个 梦想 一 点 也 不 远 ，Firefox OS 手机 已 经 面市 ，Chrome Book 也 在 售卖 ， 
大 型 的 公司 正在 开发 更 多 在 线 应 用 ， 这 样 的 未 来 还 会 远 吗 ? 
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当然 ， 现 在 的 HTML 5 还 存在 诸多 的 问题 ， 大 家 对 它 也 是 褒贬 不 一 ， 但 是 ， 依 托 于 HTML 
的 广阔 应 用 ，HTML 5 作为 其 功能 的 补足 和 扩展 ， 完 全 有 理由 相信 HTML 5 的 一 部 分 成 熟 功 
能 ， 将 会 得 到 充分 的 利用 。 对 于 年 轻 一 代 的 开发 者 来 说 ，HTML 5 必然 是 首选 技能 。 


本 章 主要 讲述 了 HTML 5 的 发 展 史 ， 介 绍 各 个 HTML 版 本 的 演变 ， 并 给 出 HTML 5 特性 结 
构图 。 接 着 ， 通 过 不 同 浏览 器 的 比较 ， 了 解 HTML 5 的 支持 情况 和 兼容 方案 ， 同 时 通过 示例 
展现 HTML 5 引入 的 新 标签 ， 感 受 HTML 5 带 来 的 简洁 特性 。 本 章 同时 还 介绍 了 作为 一 位 前 端 
工程 师 所 要 具备 的 技能 ， 帮 助 大 家 更 好 的 学 习 前 端 知 识 ， 最 后 ， 解 答 了 学 习 HTML 5 的 常见 
问题 ， 从 技术 和 终端 平台 方向 帮助 大 家 理 清 思 路 ， 确 定 目标 。 

从 下 一 章 开始 ， 将 具体 介绍 HTML 5 的 各 种 新 特性 。 
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俗话 说 : “好 事 多 磨难 ”，HTML 5 在 经 历 多 年 漫长 的 修改 后 ， 
终于 在 2012 年 12 月 17 日 正式 定稿 ， 从 此 W3C 大 声 地 向 世界 宣布 : 
“HTML 5 是 开放 的 Web 网 络 平台 的 莫 基 石 ”。HTML 5 的 特性 分 为 : 
语义 特性 、 本 地 存储 特性 、 设 备 兼 容 特性 、 连 接 特 性 、 网 页 多 媒体 特 
性 、 三 维 、 图 形 及 特效 特性 、 性 能 与 集成 特性 、CSS 3 特性 ， 共 八大 特 
性 ， 下 面 会 逐一 为 读者 揭 开 各 种 特性 的 神秘 面纱 。 


。 HTML 5 的 新 元 素 

。 Web 存 储 与 离线 Web 应 用 
。 音频 视频 与 地 理 位 置 

。 HTML 5 的 通信 技术 

。 CSS 3 技术 


2.1 HTML 5 的 新 元 素 


在 HTML 5 新 元 素 出 现 之 前 ， 编 写 HIML 一 直 试图 用 DIV 去 模拟 各 种 形态 ， 如 section 〈 章 
节 ) 、header (页 看) 、footer (页 脚 ) 、nav (导航 ) 、article (条 目 ) 等 ， 通 过 元 素 的 ID 属 
性 赋予 DIV 新 的 特征 ， 零 碎 的 命名 和 没有 统一 的 规范 使 得 页 面 语义 差强人意 ， 对 页 面 的 SEO 
(Search Engine Optimization， 搜 索引 擎 优化 〉 缺乏 友善 地 引导 ，HTML 5 在 元 素 上 的 追加 和 
增强 弥补 了 这 种 不 足 。 设 计 师 只 需要 按照 设 定好 的 元 素 标 签名 称 就 能 设计 出 在 语义 上 近乎 完 
美的 页 面 ，HTML 5 在 语义 上 的 完善 ， 使 其 在 “编写 一 次 ， 随 处 运行 ”的 理想 上 迈 出 了 坚实 
的 一 步 ， 不 论 使 用 何 种 设备 ， 都 能 和 谐 地 达到 统一 。 
然 目前 不 是 所 有 浏览 器 都 能 完美 地 支持 HIML 5 的 新 元 素 ， 但 浏览 器 在 设计 之 初 对 
于 无 法 识别 的 元 素 会 进行 忽略 ， 所 以 使 用 者 可 以 放心 地 在 开发 的 项 目 中 使 用 HTML 5 带 来 的 新 
元 素 。 或 许 ， 目 前 看 来 一 切 还 不 是 那么 地 完美 ， 但 就 像 浏览 器 刚刚 诞生 之 初 的 不 尽 如 人 意 ， 随 
着 网 络 的 飞速 发 展 ，HIML 5 将 会 展开 命运 的 翅膀 ， 飞 向 光明 的 未 来 。 


2.1.1 最 新 的 交互 元 素 一 一 内 容 交互 、 菜 单 交互 、 状 态 交互 


HTML 5 不 仅仅 只 带 来 了 一 堆 在 语义 上 进行 强化 了 的 元 素 ， 同 时 在 交互 效果 上 也 进行 了 
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极 大 地 改变 。 也 就 是 说 ， 使 用 者 可 以 在 不 使 用 JavaScript 的 情况 下 也 能 制作 出 满足 一 般 需求 的 
交互 效果 ， 这 在 笔者 看 来 是 一 个 非常 友善 的 突破 ， 可 以 通过 HTML 结 构 读 出 更 多 统一 的 使 
规范 和 动态 语义 的 交互 信息 。 

首先 看 显示 内 容 上 的 交互 特性 ， 这 里 向 读者 介绍 的 是 details 与 summary 两 个 元 素 。details 
元 素 用 来 描述 文档 或 文档 片段 的 信息 ，summary 元 素 与 details 元 素 一 同 使 用 ， 用 于 说 明文 档 
的 标题 ， 同 时 ，summary 元 素 应 为 details 元 素 的 第 一 个 子 元 素 。 通 过 一 个 简单 的 示例 展示 
summary 与 details 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 
02 <html> 
03 <style>details details{padding:15px}</style> 
<!-- 二 级 details 样 式 --> 
04 <body> 
05 <details> 
06 <summary> 交 互 </summary> 
<!-- 第 一 级 detauls 标 题 --> 
07 <details> 


08 <summary> 内 容 交 互 </ summary> 
<!-- 第 二 级 detauls 标 题 --> 

09 <p>details 与 summary 元 素 </p> 
<!-- 文档 内 容 --> 


10 </details> 
11 </details></body></html> 


details 与 summary 元 素 示例 的 交互 效果 如 图 2.1 所 示 。 


* 交互 


=—— 


图 2.1 details 与 summary 元 标示 例 


details 同 时 还 具备 open 属 性 ， 用 于 表示 是 否 展开 可 见 ， 语 法 如 下 : 
<details open="open"> 


在 菜单 交互 中 ， 命 运 最 坎坷 的 应 属 menu 元 素 ， 这 个 早 在 HTML 2 时 代 就 出 现 的 元 素 ， 
居然 在 HTML 4 时 遭 到 弃 用 ， 幸 运 的 是 HTML 5 从 语义 的 角度 重新 拾 回 menu 元 素 。menu 元 素 
出 现时 常 与 1i 元 素 一 同 使 用 ， 用 于 排列 表单 控件 。 另 外 一 个 是 command 元 素 ， 按 照 W3C 的 说 
明 ， 该 元 素 有 单 选 按钮 、 复 选 框 、 按 钮 三 种 类 型 ， 目 前 笔者 测试 了 市 面 上 主流 的 浏览 器 ， 都 
暂时 无 法 使 用 command 元 素 特性 ， 读 者 如 果 有 兴趣 可 以 自行 尝试 。 

最 后 一 类 是 状态 交互 类 型 ， 即 可 以 理解 为 页 面 上 的 进度 条 。 如 progress 元 素 、meter 元 
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素 。progress 元 素 一 般 用 于 下 载 或 者 上 传 时 的 进度 显示 ， 当 状态 产生 变化 时 ， 可 以 通过 设置 
progress 的 属性 改变 元 素 的 交互 状态 。progress 元 素 有 两 个 关键 属性 。 


。 value: 进度 的 当前 值 ， 可 以 为 整数 或 者 浮 点 数 。 
。 max: 完成 的 值 ， 即 总 量 ， 可 以 为 整数 或 者 浮 点 数 。 


下 面 通过 一 个 简单 的 示例 展示 progress 元 素 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 

02 <html> 

03 <body> 

04 下 载 进度 : <progress value=30 max=100></progress> 
<!-- 当前 进度 --> 

05 </body> 

06 </html> 


运行 效果 如 图 2.2 所 示 。 


下 载 进度 ， FI 


图 2.2 progress 元 又 使 用 效果 


meter 元 素 与 progress 元 素 非 常 相 似 ， 主 要 用 于 定义 度量 衡 ， 表 示 在 一 定 范围 内 的 值 ， 如 
投票 占 比 、 使 用 量 等 。meter 元 素 有 6 个 关键 属性 。 


。 value: 实际 度量 的 值 ， 默 认为 0， 可 以 为 整数 或 者 浮 点 数 。 
。 high: 范围 的 上 限 值 。 

。 low: 范围 的 下 限 值 。 

。 max: 最 大 值 ， 默 认 值 是 1。 

。 min: 最 小 值 ， 默 认 值 是 0。 

。 optimum: 最 佳 的 值 ， 必 须 在 min 属 性 值 与 max 属 性 值 之 间 。 


下 面 通过 一 个 示例 说 明 meter 元 素 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 

03 <body> 

04 <p> 投 票 结果 : </p> 

05 <p> 小 周 : <!-- 小 周 的 投票 值 --> 

06 <meter value="20" optimum="100" high="100" low="0" max="100" 
min="0"></meter><span>20%</span> 

07 </p> 

08 <p> 小 王 : <!-- 小 王 的 投票 值 --> 

09 <meter value="80" optimum="100" high="100" low="0" max="100" 
min="0"></meter><span>80%</span> 

10 </p> 


11 </body> 
12 </html> 


meter 元 素 示例 的 运行 效果 如 图 2.3 所 示 。 
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2. 


投票 结果 。 
小 周 ， 务 20% 
小 王 ， 80% 


图 2.3 使 用 meter 元 系 效 果 


1.2 HTML 5 页 面 结构 


HTML 5 在 结构 上 散发 着 简洁 之 美 ， 同 时 又 不 失 良 好 的 语义 结构 。 先 看 传统 的 HTML 5 出 


现 之 前 的 网 页 设计 结构 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 
<!-- 文档 规范 --> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> <!-- XML 命名 空间 --> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<!-- 页 面 编码 --> 


<meta name="keywords" content="xxx" /> <!-- 关 键 字 --> 
<meta name="description" content="xxx" /> <!-- 本 页 描述 或 关键 字 描述 --> 
<title> 标 题 </title> <!-- 页 面 标题 --> 
</head> 
<body> 内 容 </body> 
</html> 


如 果 使 用 HTML 5 诠释 上 面 的 页 面 ， 代 码 如 下 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="keywords"” content=" 关 键 字 "” /> 
<meta name="description" content=" 此 网 页 描述 " /> 
<title> 标 题 </title> 
</head> 
<body> 内 容 </body> 
</html> 


对 比 两 段 示例 代码 可 以 看 到 ， 不 用 再 去 复制 元 长 的 文档 规范 ， 而 且 不 用 在 意 doctype 是 大 


写 还 是 小 写 ， 这 是 极 简 的 经 典 体现 。 另 外 在 html 元 素 上 的 xmlns 属 性 也 得 到 了 释放 ， 这 个 早期 


用 于 


F 设 定 XML 命 名 空间 的 方法 可 以 退出 历史 舞台 了 。 
Immeta 属 性 中 的 keywords 和 description 类 型 ， 主 要 用 于 提供 搜索 引擎 优化 查询 ， 让 用 户 在 使 用 搜 


| 力 直 索引 擎 时 能 快速 地 通过 关键 字 查 找到 对 应 页 面 。 


在 HTML 5 的 页 面 中 经 常 可 以 看 到 增强 语义 性 的 元 素 ， 通 过 元 素 的 字面 英文 就 能 大 致 理 


解 元 素 的 使 用 场景 ， 下 面 通过 代码 示例 向 读者 介绍 常用 元 素 的 使 用 场景 和 使 用 方法 。 
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第 一 个 要 介绍 的 是 header 元 素 ， 用 于 显示 页 面 或 者 指定 区 域 的 页 导 或 头 部 ， 使 用 方法 如 下 : 


<header> 
<hl>HTML 5 页 面 </h1> 
<p>header 元 素 示例 </p> 
</header> 


hgroup 元 素 用 于 对 网 页 或 区 段 的 标题 进行 组 合 ， 如 对 文章 的 标题 和 副标题 进行 组 合 ， 
用 方法 如 下 : 


<hgroup> 
<h1>HTML 5 元 素 </h1> 
<h2>hgroup 元 素 </h2> 
</hgroup> 
<p> 标 题 类 的 组 合 </p> 


aside 元 素 用 于 定义 所 处 内 容 之 外 的 内 容 ， 但 又 与 附近 内 容 有 相关 性 ， 如 用 于 显示 某 篇 文 
章 的 作者 信息 ， 使 用 场景 代码 如 下 : 


<p>HTML 5 文章 内 容 , 略 . . . .</p> 
<aside> 

<h1> 作 者 介绍 </h1> 

<p> 小 周 ， 资 深 Web 前 端 技术 开发 。</p> 


</aside> 


section 元 素 用 于 定义 文档 中 的 节 ， 如 章节 、 页 收 、 页 脚 或 文档 中 的 其 他 部 分 ， 如 下 代码 
表示 文档 中 的 段落 : 


<section> 
<hl>HTML 5</h1l> 
<p>HTML 5 是 用 于 取代 1999 年 所 制定 的 HTML 4. 01 和 XHTML 1 .0 标准 的 HTML 标 准 版 本 . . .</p> 


</section> 


article 元 素 用 于 定义 独立 的 内 容 ， 如 来 自 论坛 帖子 、 新 闻 报纸 的 文章 、 博 客 文本 、 网 站 
户 评论 等 ， 如 下 面 代码 表示 一 篇 文章 : 


<article> 
<header> 
<hgroup> 
<h1>HTML 5 网 页 案例 大 全 </h1> 
<h2> HTML 5 的 整体 特性 </h2> 
</hgroup 
</header> 
<p> HTML 5 页 面 结构 内 容 </p> 


</article> 

HTML 5 为 使 用 者 带 来 了 大 量 的 语义 元 素 标签 ， 表 面 上 看 会 带 来 大 量 的 学 习 成 本 ， 但 一 旦 
熟练 使 用 ， 编 写 一 张 语义 清晰 并 且 对 搜索 引擎 友好 的 页 面 将 是 轻而易举 的 事情 。 如 果 想 成 为 一 
位 合格 的 前 端 开发 者 ， 那 么 学 习 这 些 新 标签 是 学 习 HIML 5 的 第 一 步 也 是 最 关键 的 一 步 。 


2.1.3 DOCTYPE 和 字符 集 


在 2.1.2 节 中 通过 新 老 DOCTYPE 的 对 比 ， 读 者 可 以 清晰 地 看 到 HTML 5 在 精简 旧 有 结构 上 
做 出 的 努力 。DOCTYPE 在 出 现 之 初 主要 用 于 XML 中 ， 用 作 描 述 XML 人 允许 使 用 的 元 素 、 属 性 
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和 排列 方式 。 起 初 HTML 借 鉴 了 XML 中 DOCTYPE 的 使 用 方法 ， 并 赋予 了 新 用 法 ， 如 大 家 熟 
知 的 触发 浏览 器 的 标准 模式 。 假 使 在 制作 一 张 页 面 时 ， 没 有 设 定 DOCTYPE， 则 浏览 器 会 以 
怪异 模式 状态 进行 处 理 〈 即 Quirks 模 式 ) ， 该 模式 与 标准 模式 在 模型 、 样 式 、 布 局 等 都 存在 
较 大 差异 。 因 此 ，DOCTYPE 在 制作 页 面 时 是 不 可 或 缺 的 部 分 。 


在 HIML 4 标准 中 ，DOCTYPE 被 分 为 三 种 模式 : 
。 严格 模式 ， 即 严格 遵循 W3C 标 准 的 模式 ， 代 码 格 式 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/ 
html4/strict.dtd"> 


。 过 渡 模 式 ， 包 含 了 W3C 标 准 的 内 容 ， 同 时 还 可 以 使 用 不 被 W3C 推 荐 的 标签 ， 如 font、 
b 等 ， 而 且 不 可 以 使 用 框架 元 素 〈 即 frameset 元 素 ) ， 代 码 格式 如 下 : 


<!1DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// 
WW.Ww3.0rg/TR/html4/loose.dtd"> 


。 框架 模式 ， 可 以 使 用 框架 元 素 ， 其 他 与 过 渡 模 式 相 同 ， 代 码 格式 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www. 
w3.0rg/TR/html4/frameset.dtd"> 


IE 之 前 的 HTML 关 于 DOCTYPE 标 准 ， 读 者 可 以 参看 W3C 官 方 文档 说 明 ， 网 页 地 址 为 http://Wwww 


w3.0rg/TR/1999/REC-html401-19991224/struct/global.html#h-7.2。 


虽然 之 前 版 本 的 HTML 对 DOCTYPE 做 了 重重 规定 ， 但 真实 情况 却 是 浏览 器 会 尽 最 大 的 可 


能 泻 染 对 应 的 页 面 ， 即 使 可 能 出 现 了 一 些 不 符合 模式 的 做 法 ， 唯 一 会 出 现 的 是 浏览 器 会 在 控制 


合 


ph 显示 一 些 错误 警告 ， 这 种 做 法 就 是 常 说 的 浏览 器 容错 性 ， 实 则 是 对 市 场 和 用 户 的 妥协 。 


发 展 到 HTML 5，W3C 将 剔除 DOCTYPE 原 有 鸡肋 的 声明 方式 ， 简 化 为 如 下 格式 : 
<1DoCTYPE html> 


对 于 绝 大 多 数 开 发 者 来 说 ， 只 需要 使 用 这 一 种 方式 就 足以 满足 日 常 的 开发 使 用 ， 但 如 果 


要 考虑 到 日 后 的 兼容 和 扩展 等 一 系列 问题 ， 还 需要 了 解 W3C 在 新 制定 DOCTYPE 的 一 些 新 规 


定 ， 


主要 分 为 三 类 : 


。 普通 模式 ， 即 <IDOCTYPE html> 
。 弃 用 模式 ， 听 起 来 不 知 所 云 ， 其 实 指 的 就 是 对 过 往 模 式 的 兼容 模式 ， 不 过 HTML 5 痉 
用 了 之 前 的 过 渡 模 式 和 框架 模式 ， 最 终 留 下 了 6 种 书写 格式 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" “http://www.w3.0org/TR/ 

REC-html40/strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ 

html4/strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.0org/TR/ 

xhtmll1/DTD/xhtml1l .dtd"> 
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。 遗留 兼容 模式 ， 对 于 过 往 无 法 考证 规则 的 一 种 兼容 方式 ， 语 法 格式 如 下 : 
<!ldoctype HTML system "about:legacy-compat"> 


通过 对 浏览 器 DOCTYPE 的 理解 ， 读 者 可 以 熟悉 浏览 器 模式 的 触发 方式 ， 不 过 就 通常 开 
发 而 言 ， 只 需要 使 用 <IDOCTYPE html> 这 一 种 普通 模式 。 


| 让 HTML 5 三 种 最 新 模式 可 以 查看 链接 http://dev.w3.org/html5/markup/syntax.html#doctype- 
< syntax。 


所 谓 的 字符 是 对 各 种 文字 和 符号 的 总 称 ， 涵 盖 了 各 国文 字 、 标 点 符号 、 图 形 符号 和 数字 等 。 
字符 集 是 对 多 个 字符 的 集合 ， 常 用 的 字符 集 有 ASCI、GB2312、Unicode、ISO 等 。 科 学 家 为 了 让 
计算 机 准确 地 处 理 各 种 字符 集 ， 需 要 对 字符 进行 编码 ， 以 便 计 算 机 能 够 识别 和 存储 各 种 文字 。 

在 HTML 5 出 现 之 前 ， 浏 览 器 会 根据 三 种 方式 确认 页 面 的 编码 格式 ， 按 优先 级 排列 如 下 : 


。 获取 HTTP 请 求 头 中 的 Content-Type 字 符 对 应 的 值 。 
。 使 用 meta 标 签 声明 ， 语 法 格式 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


。 外 链 资源 使 用 charset 属 性 声明 编码 格式 ， 如 在 script 标 签 中 使 用 语法 格式 如 下 : 
<script type="text/javascript" src="myscripts.js" charset="UTF-8"> 
</script> 


HTML 5 出 现 后 ， 对 字符 集 的 使 用 做 了 大 量 的 简化 ， 可 以 使 用 以 下 语法 进行 字符 集 声明 : 
<meta charset="utf-8"> 
对 于 日 常 使 用 网 站 开发 而 言 ， 结 合 HTML 5 的 字符 集 使 用 ， 笔 者 给 出 如 下 建议 : 


。 最 优先 使 用 HTTP 请 求 头 指 定编 码 。 

。 统一 全 站 字符 集 编码 ，HTML 5 推荐 UTF-8 字 符 集 。 

。 使 用 meta 标 签 确认 字符 集 编码 ， 尽 可 能 放 在 html 标 签 的 第 一 个 子 元 素 位 置 。 
。 第 三 方 引 用 的 脚本 ， 在 不 确认 字符 编码 时 ， 加 上 charset 属 性 设置 编码 格式 。 


2.1.4 其 他 标签 元 素 


HTML 5 通过 良好 的 语义 格式 ， 引 入 了 大 量 新 的 标签 ， 除 了 之 前 介绍 的 header、hgroup、 
aside、section、article 等 以 外 ， 本 节 还 将 继续 为 读者 介绍 其 他 标签 元 素 。 

datalist 元 素 ， 与 input 元 素 配合 使 用 ， 定 义 input 可 能 出 现 的 值 ， 下 面 通过 一 个 示例 说 明 
datalist 元 素 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 


02 <html> 

03 <body> 

04 <input list="province" /> // 省 份 输入 框 

05 <datalist id="province"> // 省 份 数 据 

06 <option value=" 北 京 "> // 省 份 数据 元 素 “ 北 京 ” 


07 


<option value=" 上 海 "> 


// 省 份 数 据 元 素 “上 海 ” 
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08 <option value=" 浙 江 "> // 省 份 数据 元 素 “ 浙 江 ” 
09 </datalist> 

10 </body> 

11 </html> 


当 用 户 在 文本 框 内 输入 “ 北 ” 字 ， 则 输入 框 下 方 自动 出 现 补 全 提示 ， 效 果 如 图 2.4 所 示 。 


民工 - 


北京 


图 2.4 datalist 元 票 


文本 框 使 用 datalist 的 数据 进行 提示 时 ， 将 input 的 list 属 性 设置 为 指定 datalist 的 id 属性 ， 使 
起 来 非常 简单 。 
mark 元 素 ， 用 于 标记 文本 ， 突 出 显示 文本 内 容 ， 类 似 于 文本 高 亮 的 作用 ， 使 用 方法 如 下 ;: 


<1DocTYPE HTML> 

<html> 

<body> 

<p><mark>HTML5</mark> 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标准 的 HTML 
标准 版 本 ， 现 在 仍 处 于 发 展 阶段 ， 但 大 部 分 浏览 器 已 经 支持 某 些 <mark>HTML5</mark> 技 术 。</p> 
</body> 

</html> 


显示 的 页 面 中 ，“HTML5” 部 分 因为 mark 元 素 的 包围 被 高 亮 显示 ， 效 果 如 图 2.5 所 示 。 


到 5 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTIL 1.0 标准 的 
+ 现在 仍 处 于 发 展 阶段 ， 但 大 部 分 浏览 器 已 经 支持 某 


图 2.5 matk 元 系 高 亮 关键 字 “HTML5” 


video 元 素 ， 用 于 显示 视频 ， 如 开发 者 要 在 自己 的 网 站 上 添加 一 段 演示 视频 ， 使 用 代码 如 下 : 
<video src="movie.ogg" controls="controls"> 


您 的 浏览 器 不 支持 video 标 签 。 


</video> 
video 元 素 作 为 一 个 相对 复杂 的 使 用 元 素 ， 因 此 具备 较 多 控制 属性 ， 如 表 2.1 所 示 。 


表 2.1 video 元 素 属性 


属性 说 明 
[conuols | 是 否 显 示 video 默 认 控件 ， 如 前 进 、 停 上 ， 声 音 榨 制 等 


[lp | 得 H 掺 放 | 
页 面 加 载 时 自动 进行 视频 加 载 
[se | 播放 视频 的 RL | 


有 视频 标签 ， 一 定 少不了 音频 标签 ，HIML 5 提供 了 audio 元 素 用 于 播放 音频 信息 ， 使 用 
代码 如 下 : 
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<audio src="audio.wav"> 

您 的 浏览 器 不 支持 audio 标 签 。 

</audio> 

audio 元 素 具备 与 video 元 素 相同 的 控制 属性 ， 同 样 ， 当 浏览 器 不 支持 audio 时 ， 会 在 页 面 
上 显示 元 素 中 间 的 文本 提示 信息 。 

HTML 5 还 有 众多 新 元 素 ， 刚 刚 介 绍 的 还 只 是 冰山 一 角 ， 其 他 元 素 在 本 节 就 不 再 一 一 介 
绍 了 ， 希 望 读者 在 学 习 HTML 5 新 元 素 的 同时 ， 能 够 领悟 HTML 5 设计 者 的 良 苦 用 心 。 


2.2 Modernizr 库 


作为 一 名 前 端 工程 师 ， 早 已 经 习惯 了 处 理 多 种 浏览 器 的 兼容 性 。 同 样 ， 如 果 开 发 者 想 使 
HTML 5 也 必然 要 对 一 些 老 的 浏览 器 进行 兼容 和 支持 ， 对 于 一 些 无 法 兼容 的 特性 做 出 适当 
的 提示 。 一 般 较为 常见 的 安全 检测 手段 有 4 种 ， 如 下 : 


。 检查 全 局 对 象 ， 如 window、navigator 是 否 拥有 指定 属性 ， 如 离线 存储 、 地 址 位 置信 
息 等 HTML 5 新 特性 。 

。 通过 创建 新 元 素 ， 检 查 元 素 对 象 上 是 否 拥 有 指定 的 HTML 5 属性 ， 如 Canvas 等 。 

。 通过 创建 新 元 素 ， 检 查 元 素 对 象 上 是 否 拥有 指定 的 HTML 5 方法 ， 同 时 调用 该 方法 ， 
并 判断 返回 值 ， 如 检查 video 元 素 支 持 的 视频 格式 。 

。 通过 创建 新 元 素 ， 设 置 元 素 对 象 上 的 HTML 5 指定 属性 值 ， 并 判断 设 定 后 的 值 是 否 被 
保留 。 


可 见 ， 检 测 HTML 5 特性 需要 熟知 各 种 情况 ， 这 并 非 是 一 件 简单 的 事 。 幸 运 的 是 目 
前 市 面 上 已 经 出 现 了 一 些 第 三 方 库 用 于 检测 HTML 5 的 特性 ， 下 面 将 介绍 目前 最 热门 的 
Modernizr 库 。 


2.2.1 Modernizr 库 是 什么 


Modemiz 是 一 个 用 JavaScript 编 写 的 开源 类 库 ， 用 于 检测 浏览 器 是 否 支 持 CSS 3 和 HTML 5 的 
新 功能 。Modemizr 库 比 传统 的 通过 浏览 器 的 UserAgent 获 取 浏 览 器 版 本 信息 判断 特性 支持 的 
方法 更 可 靠 ， 检 测 结束 后 将 判断 结果 存储 在 Modernizr 对 象 上 ， 使 用 者 可 以 通过 获取 Modernizr 
对 象 上 的 信息 判断 浏览 器 对 CSS 3 或 者 HTML 5 的 支持 情况 。 


棍 _ 传统 的 通过 UserAgent 判 断 浏览 器 ， 并 通过 对 应 浏览 器 版 本 号 判断 是 否 支持 指定 特性 的 方法 
ee 的 缺点 在 于 要 不 断 新 增 的 浏览 器 和 版 本 号 ， 使 得 要 对 UserAgent 的 判断 进行 同步 更 新 ， 同 时 
检测 浏览 器 版 本 号 兼容 的 CSS 3 或 者 HTML 5 也 是 一 项 巨大 而 且 非 常 有 风险 的 任务 。 


使 用 Modernizr 类 库 可 以 前 往 官网 下 载 ， 地 址 为 http://modernizr.com/， 页 面 上 提供 了 
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development 〈 未 压缩 版 本 ， 包 含 注 释 ) 和 production 〈 压 缩 版 本 ) 两 种 版 本 ， 如 图 2.6 所 示 。 


进入 development 下 载 页 面 ， 可 以 发 现 Modernizr 提 供 了 各 类 属性 检测 的 选择 项 ， 使 得 开 


“Anindispensabletool.” 
一 Bruce Bowman, sr. produet manager, Edge Toqdls& Services 


Modernizr is a JavaScript ibrary Download Modernizr 2.6.2 
that detects HTML5 and CSS3 
features in the users browser. 


Why use Modernizr? 


Taking advantage of cool new web technologies 
1s great fun, until you have to support browsers 
that lag behind Modernlzr makes It easy for you 


图 2.6 Modernizr 官 网 


泪 


者 可 以 按照 自身 的 需求 下 载 应 用 包 的 最 小 集 ， 如 图 2.7 所 示 。 


2.2:2 


本 节 将 通过 多 个 示例 向 读者 展示 Modernizr 的 部 分 使 有 


Download Modernizr 2.6.2 
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2.7 Modernizr 类 库 检 测 包 选 择 


使 用 Modernizr 库 提供 的 方法 检测 浏览 器 的 各 项 指标 
方法 。 同 一 般 的 外 链 脚本 一 样 ， 首 


先 在 使 有 


上 页 面 引 入 Modermizr 脚 本 ， 示 例 代码 如 下 : 
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素 的 
按照 这 


<!DOCTYPE html> 

<html> 

<head> <script src="modernizr.js"></script></head> 
<!-- 引入 Modernizr 脚 本 --> 

</html> 


当 页 面 加 载 完毕 后 ，Modernizr 类 库 会 将 检测 过 的 属性 以 class 类 名 的 方式 添加 到 html 元 素 
如 果 上 例 的 代码 在 浏览 器 运行 处 理 后 的 页 面 转换 成 HIML， 代 码 如 下 : 


<!DOCTYPE html> 

<html class=" js flexbox canvas canvastext webgl no-touch geolocation 
postmessage websqldatabase indexeddb hashchange history draganddrop 
websockets rgba hsla multiplebgs backgroundsize borderimage borderradius 
boxshadow textshadow opacity cssanimations csscolumns cssgradients 
cssreflections csstransforms csstransforms3d csstransitions fontface 
generatedcontent video audio localstorage sessionstorage webworkers 
applicationcache svg inlinesvg smil svgclippaths" style=""><head> 
<!-- 已 class 名 显示 支持 与 不 支持 的 属性 --> 

<script src="modernizr.js"></script> 

</head> 

<body></body></html> 


通过 处 理 后 的 页 面 代码 可 以 看 到 ，Modernizr 将 检测 到 的 HTML 5 属性 名 都 列 在 了 html 元 
class 类 名 上 ， 同 时 对 于 不 支持 的 属性 会 添加 “no-” 的 前 级 ， 可 以 看 到 其 中 no-touch 就 是 

样 的 规则 产生 的 。 
Modernizr 在 页 面 初始 完毕 后 ， 还 会 创建 一 个 名 为 Modernizr 的 JavaScript 对 象 ， 该 对 象 


的 每 个 属性 都 是 检测 浏览 器 完毕 以 后 对 应 HTML 5 属性 名 的 布尔 值 ， 如 判断 浏览 器 是 否 支持 
WebSockets， 那 么 可 以 用 如 下 代码 进行 检测 : 


if(Modernizr.websockets ){ 
console.log(' 支持 websockets');}elsef{ 
console.1og (' 不 支持 websockets');}; 


不 仅 可 以 通过 JavaScript 的 方式 进行 检测 ， 使 用 者 还 可 以 结合 class 类 名 进行 操作 ， 代 码 如 下 : 


<1DOCTYPE html> 


<html> 
<head> 
<style type="text/css"> 
.yes-tip, .no-tip{ display: none;} <!-- 默认 提示 不 显示 --> 


.Canvas .yes-tip{color:green; display: block;} 
<!-- 支持 canvas， 显 示 提示 为 绿色 --> 
.no-canvas .no-tip{ color:red; display: block; } 
<!-- 不 支持 canvas， 显 示 提 示 为 红色 --> 
</style> 
<script src="modernizr.js"></script> 
</head> 
<body> 
<div class="yes-tip"> 您 的 浏览 器 支持 canvas</div> <!-- 绿色 支持 提示 --> 
<div class="no-tip"> 您 的 浏览 器 不 支持 canvas</div> <!-- 红色 不 支持 提示 --> 
</body> 
</html> 
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示例 的 原理 非常 简单 ， 当 加 载 Modernizr 类 库 以 后 ， 会 默认 为 浏览 器 的 html 元 素 添加 支持 
HTML 5 特性 的 class 类 名 。 当 使 用 支持 HTML 5 Canvas 的 浏览 器 打开 页 面 时 ，html 元 素 被 添加 
名 为 canvas 的 样式 类 名 至 class 属 性 ， 页 面 文档 中 样式 类 名 为 yes-tip 的 div 元 素 被 激活 显示 ， 同 
时 出 现 绿色 的 “您 的 浏览 器 支持 canvas” 提 示 ， 反 之 亦 然 。 

通常 绝 大 部 分 浏览 器 使 用 audio 的 同时 会 实现 ogg、mp3、wav、m4a 这 4 种 基本 的 视频 格 
式 ， 但 不 排除 部 分 浏览 器 只 实现 了 部 分 格式 ， 下 面 可 以 通过 Modernizr 类 库 判 断 浏览 器 ， 并 提 
供 最 佳 的 视频 加 载 格式 ， 代 码 如 下 : 


var audio = new Audio(); 


audio.src = Modernizr.audio.ogg ? 'background.ogg' : // 是 否 支持 ogg 格 式 视频 
Modernizr.audio.mp3 ? 'background.mp3' : // 是 否 支 持 mp3 格 式 
'background.m4a'; // 是 否 支 持 m4a 格 式 
audio.play()7 


代码 首先 会 创建 一 个 Audio 对 象 用 于 播放 视频 ，Modernizr 执 行 完毕 后 ， 会 将 检测 完毕 的 
视频 格式 添加 至 Modernizr 的 audio 对 象 属性 上 ， 示 例 的 代码 中 先 通 过 Modernizr.audio.ogg 判 断 
ogg 格 式 视频 ， 当 浏览 器 支持 时 则 Modernizr.audio.ogg 的 值 为 tue， 即 加 载 名 为 background.ogg 
的 视频 文件 ， 如 果 不 支持 则 继续 执行 ， 其 他 视频 格式 判断 方式 与 ogg 格式 视频 相同 。 
虽然 HTML 5 的 出 现 可 以 让 开发 者 使 用 大 量 新 的 特性 ， 但 同时 还 是 有 很 大 一 部 分 普通 用 户 
使 用 着 不 支持 HTML 5 的 老 浏览 器 访问 网 页 ， 在 无 法 迅速 地 让 用 户 升级 浏览 器 的 情况 下 ， 这 时 
候 诞 生 了 一 种 名 为 Polyfills 的 技术 ， 即 在 老 版 本 的 浏览 器 中 实现 统一 标准 的 应 用 程序 接口 。 

比方 说 ， 开 发 的 某 个 应 用 要 实现 获取 用 户 的 地 理 位 置 经 纬度 信息 ， 需 要 借助 HTML 5 的 
Geolocation 功 能 ， 但 对 于 老 版 本 的 浏览 器 该 功能 无 法 实现 ， 这 时 候 就 需要 通过 第 三 方 的 服务 
去 模拟 Geolocation， 如 谷歌 提供 的 地 理 位 置 服务 。 为 了 让 业务 层 的 代码 更 加 清晰 ， 让 普通 开 
发 者 不 需要 关心 浏览 器 层面 的 兼容 问题 ， 这 时 需要 实现 一 个 与 HTML 5 的 Geolocation 应 用 程序 
接口 相同 的 代码 包 ，Modernizr 在 这 方面 也 提供 了 对 应 的 加 载 支持 ， 示 例 代码 如 下 : 


Modernizr.load({ 


test: Modernizr.geolocation, // 判断 条 件 
Yep :) "Geo Jes // 支持 geolocation 加 载 的 脚本 
nope: 'geo-polyfill.js' // 不 支持 geolocation 加 载 的 脚本 


); 

在 GitHub 上 的 Modernizt 库 中 ， 其 开发 团队 为 大 家 搜集 了 与 HTML 5 相关 的 Polyfills， 地 址 
为 https://github.com/Modernizr/Modernizr/wikWHTMIL5-Cross-Browser-Polyfills， 如 果 无 法 访问 
请 使 用 代理 。 


| 区 未 GitHub 是 目前 最 火 的 基于 Git 的 代码 托管 平台 ， 并 提供 了 一 个 Web 界 面 和 各 种 系统 的 可 视 化 操 
区 作 工 具 ， 是 管理 软件 开发 和 发 据 学 习 代码 的 首选 。 


Modernizr 的 使 用 远 远 不 止 这 些 ， 同 时 该 类 库 还 在 开发 团队 的 努力 下 不 断 演 化 ， 如 果 读 
者 想 了 解 更 多 的 开发 使 用 信息 ， 可 以 前 往 官网 的 开发 者 文档 ， 地 址 为 http://modernizr.com/ 


docs/。 
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2.3 表单 和 文件 


表单 应 用 占据 了 网 页 功能 的 半壁 江山 ， 说 到 表单 ， 最 先 让 人 联想 到 的 是 表单 元 素 ， 一 个 
可 以 容纳 文本 输入 、 下 拉 列 表 、 单 选项 、 复 选 框 等 等 的 超级 元 素 。 传 统 的 表单 使 用 有 诸多 限 
制 ， 比 如 表单 元 素 只 会 提交 表单 标签 内 部 的 元 素 集合 ， 表 单 操作 行为 必须 写 在 表单 自身 的 属 
性 上 。HTML 5 在 这 方面 的 改进 取得 了 长 足 的 进步 ， 初 次 接触 到 HTML 5 中 的 表单 时 ， 一 定 会 
被 这 大 胆 的 设计 所 折服 。 

同样 ， 文 件 操作 一 直 是 HTML 5 出 现 之 前 网 页 功能 开发 挥 之 不 去 的 软肋 ， 通 常 的 做 法 是 
需要 借助 第 三 方 的 工具 读 取 和 操作 文件 ， 如 使 用 Flash 等 。 如 此 的 开发 ， 增 加 了 开发 的 复杂 度 
和 不 确定 性 ， 大 大 提高 了 开发 和 维护 成 本 ， 因 此 HTML 5 提出 了 一 个 全 新 的 File 对 象 用 于 设置 
和 获取 文件 信息 。 接 下 来 ， 将 会 为 读者 详细 介绍 表单 和 文件 的 使 用 ， 一 同感 受 HTML 5 全 新 
的 设计 思想 。 


2.3.1 input 元 素 的 新 增 类 型 


表单 中 使 用 最 多 的 莫 过 于 input 元 素 ， 主 要 用 于 填写 用 户 信息 ， 传 统 的 input 元 素 有 10 种 类 
型 ， 如 表 2.2 所 示 。 


表 2.2 传统 的 input 元 素 类 型 


类 型 名 称 说 明 
| button | 可 单 击 的 按钮 
|fle | 输入 字段 和 “浏览 器 ”按钮 ,用 于 文件 上 传 


隐藏 的 输入 字段 
图 像 形式 的 提交 按钮 
密码 输入 框 ， 输 入 的 字符 被 掩 码 
| 单 选 按钮 | 


重 置 按钮 ， 清 空 表单 内 的 所 有 数据 
submit 提交 按钮 ， 提 交 表 单数 据 至 远程 服务 器 
text 文本 输入 杠 | 


HTML 5 在 此 基础 上 做 了 进一步 地 加 强 ， 添 加 了 另外 13 种 类 型 ， 如 表 2.3 所 示 。 
表 2.3 HTML 5 新 增 input 元 素 类 型 


类 型 名 称 说 明 


人 
datetime 带 日 历 和 时 间 控 件 的 日 期 字段 

datetime-local 带 日 历 和 事件 控件 的 日 期 字段 

email 电子 邮箱 文本 字段 

month 带 日 历 控 件 的 日 期 字段 的 月 份 

number 带 数 字 控 件 的 数字 字段 

Tange 带 滑动 控件 的 数字 字段 

i 带 时 间 控 件 的 日 期 字段 的 时 、 分 、 秒 
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类 型 名 称 
wl 


项 日 房 榨 作 的 目 其 于 限 “ 同 7 
险 色 器 

用 于 搜索 的 文本 字 耻 
用 于 电话 号 码 的 文本 字 酉 


为 了 便于 读者 观察 学 习 ， 图 2.8 呈 现 了 各 种 input 元 素 新 类 型 在 网 页 中 的 预览 效果 。 


Week 
color 


Date: | 年 /月 /日 可 v 
Datetime: 


Datetime-local: | 年 /月 /日 一 :一 一 
Email: 

Jonth: | 一 一 年 一 月 国 Y 

Number: 习 

Range: 一 一 才 一 一 

Time:; | 一 :一 要 

mL 

Week: |- 一 年 第 一 周 =M 


图 2.8 HTML 5 新 增 input 元 又 类 型 的 预览 效果 


查 _ 
| 臣下 。 目前 不 是 所 有 浏览 器 都 支持 上 述 input 新 类 型 ， 读 者 可 以 使 用 Chrome 最 新 版 进行 浏览 。 


2.3.2 input 元 素 新 增 的 公用 属性 

HIML 除 了 带 来 令 人 激动 的 mput 新 类 型 ， 同 时 还 带 来 了 非常 多 的 input 新 属性 。 以 往 需要 
用 JavaScript 实 现 的 功能 ， 现 在 只 需要 修改 一 个 属性 就 能 搞定 。HIML 5 新 标准 带 来 了 更 加 细 
致 的 分 工 ， 使 得 开发 者 拥有 更 多 便捷 的 使 用 选择 。 

下 面 将 介绍 input 新 属性 ， 首 先 通 过 一 个 表格 看 看 到 底 都 新 增 了 哪些 属性 ， 如 表 2.4 所 示 。 


表 2.4 HTML 5 新 增 input 元 素 属性 


属性 名 称 
使 用 输入 自动 完成 功能 

页 面 在 载 入 成 功 后 获得 焦点 ，type 类 型 为 hidden 的 除外 
规定 字段 所 属 表单 ， 可 为 多 个 

覆盖 所 属 表单 的 action 属 性 ， 适 用 于 type 类 型 为 submit、image 
覆盖 所 属 表单 的 enctype 属 性 ， 适 用 于 type 类 型 为 submit、image 
覆盖 所 属 表单 的 method 属 性 ， 适 用 于 type 类 型 为 submit、image 
formnovalidate 覆盖 所 属 表 单 的 novalidate 属 性 ， 适 用 于 type 类 型 为 submit、image 
覆盖 所 属 表单 的 target 属 性 ， 适 用 于 type 类 型 为 submit、image 

引用 输入 字段 提示 的 对 应 datalist 数 据 


formtarget 
list 
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( 续 表 ) 
属性 名 称 
max 输入 数字 的 最 大 值 
min 输入 数字 的 最 小 值 
pattern 输入 字段 值 的 模式 ， 正 则 格式 
placeholder 输入 字段 提示 
required 表示 输入 字段 的 值 是 必需 的 ， 不 为 空 
step 输入 数字 的 间隔 
multiple 允许 选择 多 个 上 传 文件 


接 下 来 将 结合 实际 使 用 场景 介绍 部 分 新 增 属性 功能 ， 使 读者 能 够 在 平时 的 开发 中 得 以 灵 
活 地 运用 。 
1. autocomplete 属 性 


autocomplete 属 性 默认 是 开启 状态 ， 浏 览 器 自身 会 记录 页 面 对 应 文本 框 每 次 输入 的 信息 ， 
当 用 户 键入 相关 的 字符 时 ， 会 出 现 相关 的 提示 信息 。 但 有 些 情 况 下 用 户 并 不 希望 浏览 器 自己 
做 出 提示 ， 因 为 很 多 时 候 用 户 错误 的 输入 信息 也 会 被 记录 下 来 。 在 很 多 第 三 方 类 库 中 都 会 提 
供 下 拉 提 示 插 件 ， 即 当 用 户 输入 文字 时 ， 将 与 文字 相关 的 信息 在 输入 文本 框 下 方 进行 提示 选 
择 ， 使 用 者 可 以 非常 方便 地 在 输入 部 分 关键 字 后 找到 想 要 的 结果 ， 如 百度 搜索 框 的 下 拉 提 
示 ， 如 图 2.9 所 示 。 


Bai 合 天 度 


新 闻 网 页 贴吧 知道 音乐 图 片 规 频 地 图 


lm LET 


html 是 什么 

htmis 教程 

html 空格 

html 语 言 
htmlspecialchars 
html table 


图 2.9 百度 查询 下 拉 提 示 


攻 对 于 使 用 下 拉 提 示 效 果 的 文本 输入 框 ， 都 会 将 autocomplete 属 性 设置 为 off， 以 避免 浏览 器 默 
| 认 提 示 框 与 JavaSeript 插 件 模拟 的 提示 框 在 页 面 上 相互 交 春 。 


2. autofocus 属 性 

autofocus 属 性 默认 为 关闭 状态 ， 在 该 属性 没有 出 现 之 前 ， 要 实现 类 似 的 功能 需要 借助 于 
JavaScript。 一 般 input 元 素 的 autofocus 属 性 会 用 在 表单 的 第 一 个 填写 元 素 上 ， 如 常见 的 登录 页 
面 ， 效 果 如 图 2.10 所 示 。 
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看 趟 青 ? 换 一 张 


厂 一 个 月 之 内 免 本 录 
耳 我 已 看 过 并 同意 大 众 点 评 风 人 用 户 使 用 协议 


图 2.10 登录 页 面 


autofocus 属 性 主要 的 用 处 是 ， 当 页 面 加 载 完 毕 后 ， 用 户 可 以 通过 键盘 直接 输入 信息 ， 而 不 
需要 通过 鼠标 点 选 输入 框 后 再 进行 输入 ， 是 一 种 交互 体验 上 的 优化 。 为 了 在 老 版 本 的 浏览 器 中 
实现 类 似 于 autofocus 属 性 的 效果 ， 可 以 通过 JavaScript 强 行 触发 元 素 的 focus 事 件 ， 代 码 如 下 


document .getElementBYyId('id') .focus() 


棍 _ 
| 里 款 正常 的 情况 下 ， 一 张 页 面 只 会 出 现 一 个 被 设置 了 autofocus 属 性 的 input 元 素 。 


3. form 属 性 


fom 属 性 的 出 现 ， 使 得 input 元 素 从 表单 结构 中 被 完全 解放 出 来 。 使 用 过 HIML 5 之 前 表单 的 
开发 者 会 知道 ， 只 有 将 input 元 素 放置 在 表单 标签 内 ， 数 据 才 能 同 表单 一 起 被 提交 ， 这 样 的 设计 使 
得 页 面 元 素 利用 率 大 打折 扣 ， 页 面 设计 上 出 现 过 许多 无 用 的 结构 。 新 属性 的 使 用 方法 如 下 ; 


<form action="login" method="post" id="login form"><input type="submit" 
/></form> 

账号 :<input type="text" name="name" form="login form"/> 

密码 : <input type="password" name="password" form="login form" /> 


查 _ 
| 切入 当 一 个 input 元 素 被 用 于 多 个 表单 ， 可 以 在 form 属 性 上 将 各 表单 id 值 以 空格 符 隔 开 填写 。 


4. 重 写 表单 的 input 属 性 
HTML 5 的 input 元 素 中 ， 还 有 一 类 新 属性 用 于 重 写 input 元 素 所 属 表 单 属性 ， 如 以 下 各 项 。 


。 formaction: 重 写 表 单 的 action 属 性 ，action 用 于 设 定 发 送 表单 数据 的 请 求 地址 。 

。 formenctype: 重 写 表 单 的 enctype 属 性 ，enctype 表 示 发 送 表单 的 编码 格式 ， 如 multipart/ 
form-data， 表 单 默认 以 application/x-www-form-urlencoded 编 码 格 式 进行 发 送 。 

。 formmethod: 重 写 表单 的 method 属 性 ，method 表 示 发 送 表 单数 据 的 方法 ， 常 用 的 如 
get、 post。 


43 


QH samen ee 


。 formnovalidate: 重 写 表单 的 novalidate 属 性 ，novalidate 表 示 不 对 表单 数据 进行 浏览 器 
默认 验证 ， 如 验证 input 类 型 为 url、email、telephoned 的 元 素 。 
。 formtarget: 重 写 表 单 的 target 属 性 ，target 属 性 规定 在 何 处 打开 提交 请 求 。 


5. list 属 性 


input 元 素 的 list 属 性 是 一 个 相当 与 时 俱 进 的 改进 ， 将 以 往 用 JavaScript 实 现 的 输入 选择 框 通 
过 原生 的 浏览 器 功能 实现 ， 使 用 方法 如 下 : 


网 站 : <input type="url" list="url list" name="link" /> 
<datalist id="url list"> 

<option label=" 谷 歌 " value="http://www.google.com" /> 
<option label=" 百 度 " value="http://www.baidu.com" /> 

<option label=" 淘 宝 " value="http://www.taobao.com" /> 
<option label=" 大 众 点 评 网 "value="http://www.dianping.com" /> 


</datalist> 
示例 效果 如 图 2.11 所 示 。 
网 站 : 厂 “| 县 
http’//wew googLe con 全 
http :1 baida com 百度 
http://m taobao com 53 
hetps /re diuging em XOAIN 


图 2.11 input 元 票 list 使 用 


6. placeholder 属 性 


input 元 素 的 placeholder 属 性 是 一 类 实战 性 非常 强 的 应 用 实现 。 多 数 网 站 在 设计 输入 框 的 
同时 ， 为 了 达到 良好 的 交互 体验 ， 会 在 输入 框 的 空白 输入 处 添加 一 段 灰色 的 提示 文字 ， 方 便 
用 户 按照 设计 意图 进行 填写 。 在 placeholder 属 性 出 现 之 前 通常 有 两 类 实现 方法 : 

。 监听 input 元 素 的 focus 和 blur 事 件 ， 在 获取 焦点 时 ， 将 预先 输入 在 文本 框 内 的 文字 清 

空 ， 并 修改 文本 框 的 输入 字体 颜色 。 

。 在 文本 框 的 上 方 悬 浮 一 个 用 于 提示 的 label 标 签 ， 当 单 击 标签 时 ， 隐 藏 标签 并 通过 脚本 

强行 设置 下 方 文本 框 获 取 焦 点 。 


placeholder 使 用 方法 如 下 : 


链接 : <input type="url" name="url" placeholder="http://www.dianping.com" /> 


placeholder 属 性 的 出 现 有 效 地 解决 了 这 类 常用 问题 ， 相 同 的 功能 可 以 完全 使 用 原生 的 属 
性 进行 蔡 代 ， 减 少 了 开发 代码 量 和 开发 成 本 。 

HTML 5 除了 为 input 元 素 新 增 刚刚 介绍 的 6 种 属性 外 ， 还 有 新 增 了 之 前 表 2.4 中 出 现 的 
属性 功能 。 


2.3.3 新 增 表 单元 素 
上 一 节 介绍 了 表单 中 最 常用 的 iput 元 素 在 HTML 5 中 新 的 使 用 ， 本 节 将 介绍 其 他 表单 元 


二 


他 
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素 通 过 HTML 5 强化 后 的 效果 。 
1. output 元 素 
output 元 素 用 于 表单 内 各 种 类 型 的 输入 ， 在 功能 上 并 没有 很 大 的 新 意 ， 不 过 从 HTML 5 的 语 


义 角度 出 发 ， 确 实 丰 富 了 表单 元 素 的 多 样 性 。output 元 素 可 以 监听 forminput 事 件 ，forminput 
有 件 用 于 监听 表单 内 的 输入 ， 每 当 输 入 结束 后 触发 。 下 面 通过 一 个 示例 介绍 output 元 素 使 


ml 
由 


01 <!DOCTYPE html> 

02 <html> 

03 <body> 

04 <form> 

05 <label for="” age "> 年 龄 : </label> 

06 <input type="range" name="age" min="1"” max="100" step="1"/> 
07 <output onforminput="this.value=age.value">30</output> 

08 </form> 

09 </body> 

10 </html> 


示例 演示 了 一 个 选择 年 龄 输入 框 ， 同 时 在 选择 时 自动 在 output 元 素 中 显示 选中 的 数值 ， 
效果 如 图 2.12 所 示 。 


Lo 口 gile://localhos... * | 志 


4 > 人 2 o 


图 2.12 output 元 票 使 用 


户 可 以 拖 动 示例 中 的 区 域 输入 框 ， 同 时 右 侧 的 数字 会 显示 最 新 的 数值 。 在 HTML 5 出 
现 之 前 ， 要 实现 类 似 的 功能 需要 监测 input 中 的 数字 是 否 发 生变 化 ， 在 变化 时 通过 脚本 改变 输 
出 的 值 ， 该 方法 的 缺陷 在 于 当 表 单 中 出 现 多 个 元 素 时 ， 开 发 者 需要 监听 每 个 输入 元 素 的 数值 
变化 。HTML 5 的 output 元 素 使 得 事情 变 得 简单 ， 使 用 时 只 需要 监听 output 元 素 的 forminput 事 
情 ， 当 表单 中 的 数据 发 生变 化 时 会 对 forminput 事 件 进行 触发 通知 。 


担 _ 
| 臣下 。 笔者 使 用 Opera 12.14 版 本 浏览 器 预览 output 元 素 示例 。 


2. keygen 元 素 

keygen 元 素 用 于 表单 提交 后 的 用 户 验 证 ， 当 表单 提交 时 ，keygen 元 素 会 生成 两 个 密 钥 : 
一 个 私 钥 存放 在 用 户 浏览 器 客户 端 ， 另 外 一 个 公 钥 被 发 送 至 服务 器 。 目 前 ， 不 同 浏览 器 对 
keygen 的 支持 程度 不 同 ， 支 持 情况 如 图 2.13 所 示 。 
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Safari Chrome I 
4 时 10- 
v v x 


图 2.13 keygen 浏 览 器 支持 情况 
不 仅 如 此 ， 浏 览 器 支持 的 形式 也 不 同 ， 同 样 是 key 元 素 有 不 同 的 加 密 形式 ， 如 图 2.14 所 示 。 


1024 (中 等 强度 ) 


Chrome 


图 2.14 Opera 和 Chrome 的 keygen 元 系 对 比 


HTML 5 的 keygen 元 素 属性 如 表 2.5 所 示 。 


表 2.5 keygen 元 素 属 性 
属性 名 称 说 明 


属性 中 的 值 随 着 公 钥 一 同 提交 至 服务 器 
| fom | 定义 所 属 表单 ， 一 个 或 者 多 个 


密 钥 类 型 ， 默 认为 RSA 
页 面 加 载 完毕 后 获得 焦点 


2.3.4 表单 新 增 的 验证 方法 


HTML 5 除了 给 表单 带 来 了 多 种 类 型 的 input 元 素 和 多 种 新 元 素 外 ， 同 时 还 加 强 了 表单 验 
证 方面 的 体验 。 以 往 开发 者 想 要 给 表单 添加 验证 有 两 种 方法 : 

。 通过 浏览 器 脚本 监听 表单 提交 事情 ， 验 证 提交 数据 是 否 符合 输入 格式 ， 并 给 出 提示 。 

。 在 表单 提交 后 ， 后 台 服 务 器 对 表单 数据 进行 验证 ， 对 于 无 法 通过 的 数据 重新 输出 页 

面 进行 提示 。 

HTML 5 给 开发 者 带 来 了 第 三 种 表单 验证 方法 ， 通 过 表单 元 素 内 置 的 验证 属性 ， 当 使 用 
者 提交 表单 ， 浏 览 器 会 根据 各 元 素 自身 的 验证 属性 进行 判断 并 给 出 提示 。 下 面 将 介绍 与 表单 
相关 验证 的 属性 。 

1. novalidate 属 性 


novalidate 属 性 可 以 作用 于 form 和 input 元 素 ， 表 示 该 元 素 区 域 不 进行 表单 验证 。 表 单 默认 
在 提交 时 会 验证 类 型 为 url、telephone、email、date 的 元 素 ， 代 码 如 下 : 
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01 
02 
03 
04 
05 
06 
07 


<!IDOCTYPE HTML> 

<html><body> 

<form method="get"> 

网 址 : <input type="url" name="user email" /> <!-- 网 址 输入 框 --> 
<input type="submit" /> <!-- 提交 按钮 --> 
</form> 

</body></html> 


网 页 运行 效果 如 图 2.15 所 示 。 


网 直 : 三“ B 到 


图 2.15 带 有 url 类 型 的 input 元 系 表 单 


在 文本 框 内 输入 不 符合 URL 规 则 的 内 容 ， 并 单 击 “ 提 交 ” 按 钮 ， 表 单 出 现 “ 请 输入 网 
址 。” 的 信息 提示 ， 效 果 如 图 2.16 所 示 。 


网 站 : | 
本 请 输入 网 址 。 


图 2.16 提交 表单 出 现 错误 提示 


假如 在 某 些 情况 下 ， 输 入 的 网 址 内 容 并 不 一 定 需要 严格 遵循 规范 要 求 ， 则 可 以 通过 在 
form 元 素 上 添加 novalidate 属 性 解决 ， 代 码 如 下 : 


<form method="get" novalidate="true"></form> 


2. pattern 属 性 


pattern 属 性 用 于 验证 input 提 交 内 容 的 格式 ， 验 证 格式 为 正则 表达 式 。 如 下 例 显示 只 能 输 
入 三 个 数字 的 文本 框 ， 代 码 如 下 : 


06 
07 


<!DOCTYPE HTML> 

<html><body> 

<form method="get"> 

3 位 数 : <input type="text" name="num" pattern="[0-9] {3}" /> 


<!-- 输入 框 --> 
<input type="submit" /> 
<!-- 提交 按钮 --> 
</form> 
</body></html> 


在 文本 输入 框 内 输入 a， 并 单 击 “ 提 交 ” 按 钮 ， 此 时 输入 的 内 容 与 pattern 属 性 的 验证 规则 


不 相符 ， 


表单 出 现 “ 请 与 所 请 求 的 格式 保持 一 致 。” 的 提示 ， 效 果 如 图 2.17 所 示 。 


3b 数 : P | 本 到 


辆 请 与 所 请 求 的 格式 保持 一 致 


图 2.17 pattem 属 性 提交 提示 
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正则 表达 式 是 用 一 个 “字符 囊 ” 来 描述 一 个 特征 ， 然 后 去 验证 另 一 个 “字符 囊 ” 是 否 符合 这 

次 个 特征 。 比 如 表达 式 “ab+” 描 述 的 特征 是 “一 个 a 和 任意 个 b”， 那 么 ab、abb、abbbbbbbbbb 

医 都 符合 这 个 特征 。 正 则 表达 式 的 使 用 可 以 参考 http://msdn.microsoft.com/zh-cn/library/ 
aeSbf541(VS.80).aspx。 


3. required 属 性 


required 属 性 作用 于 input 元 素 ， 规 定 输入 的 内 容 不 能 为 空 ， 可 以 与 之 前 的 novalidate 和 
pattem 属 性 组 合 使 用 ， 示 例 代 码 如 下 : 


01 <!DOCTYPE HTML> 

02 <html><body> 

03 <form method="get"> 

04 邮箱 : <input type="email" name="email" required="required" /> 
<!-- 邮箱 输入 框 --> 

05 <input type="submit" /> <!-- 表单 提交 按钮 --> 

06 </form> 

07 </body></html> 


当 用 户 不 输入 任何 内 容 ， 直 接 单 击 “ 提 交 ” 按 钮 ， 表 单 会 做 出 提示 ， 显 示 “ 请 填写 此 字 
段 。”， 效 果 如 图 2.18 所 示 。 


邮箱 : 厂 “| 困 到 


贺 请 填写 此 字段 。 
图 2.18 required 属 性 使 用 


required 属 性 在 表单 的 应 用 中 最 为 常用 ， 同 时 结合 pattem 属 性 ， 能 发 挥 出 强大 的 验证 功能 。 


2.3.5 File 对 象 


在 HTML 5 出 现 之 前 ， 想 要 通过 浏览 器 访问 本 地 文件 只 能 依赖 一 些 第 三 方 的 控件 ， 不 仅 
在 开发 上 增加 了 难度 ， 而 且 在 使 用 上 也 会 变 得 复杂 。 在 新 出 的 HTML 5 中 ， 根 据 W3C 的 规 
定 ， 浏 览 器 允许 JavaScript 获 取 本 地 文件 的 大 小 、 名 称 、 类 型 等 多 种 数据 。File 对 象 的 出 现 改 
善 了 基于 浏览 器 应 用 的 文件 上 传 方式 ， 使 得 文件 拖 放 上 传 成 为 可 能 ， 从 此 开发 者 可 以 不 需要 
借助 Flash 也 能 开发 出 完美 流畅 的 上 传 体验 。 

File 对 象 拥有 的 属性 如 表 2.6 所 示 。 


表 2.6 File 对 象 属性 


属性 名 称 说 明 
文件 最 后 修改 时 间 


[sze | 文人 大 小 单位 字 节 


File 对 象 拥有 的 方法 如 表 2.7 所 示 。 
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表 2.7 File 对 象 方法 


getAsBinary 获取 一 个 字符 串 ， 该 字符 串 包含 在 原始 二 进 制 文件 的 数据 格式 
getAsDataURL 返回 一 个 字符 串 ， 其 中 包含 一 个 数据 URL 编 码 的 全 部 内 容 引 用 的 文件 
getAsText 返回 文件 的 内 容 作为 一 个 字符 串 中 ， 文 件 的 数据 被 解释 为 文本 使 用 给 定 的 编码 | 


下 面 展示 如 何 获 取 File 对 象 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 

03 <body> 

04 <input type="file" id="input"> <!-- 文件 选择 --> 
05 </body> 

06 <script type="text/javascript"> 

07 document .getElementById ("input") .addEventListener ("change", 
function () { // 监听 上 传 change 事 件 

08 console.1log (this .files); // 打印 文件 信息 
09 }, false); 

10 </script> 

11 </html> 

示例 效果 如 图 2.19 所 示 。 


琶 瑟 于 | 坟 运 瓜 文件 
图 2.19 File 对 象 使 用 示例 


单 击 “ 选 择 文件 ”按钮 ， 选 中 本 地 图 片 ， 此 时 浏览 器 控制 台 输 出 图 片 相关 信息 ， 效 果 如 
图 2.20 所 示 。 


Raloon bm» 


Bements Resources Newwor Sources Timeine 有 CR 


TFttettst (0: File, tength: 1, iten: function) @ 
Fil 


e 
lastModifiedDate: Sat Aug 11 29L2 17:27:59 GHT+8889 (中 国标 准时 间 ) 
nane: “Balloon. bap" 


18037 
“inage/bap" 
ativepath: ** 


LhtaL:s 


口 , 注 a © topfnme>v F ED | nor waming Logs Debug E93 


图 2.20 上 传 文件 控制 台 输 出 信息 


器 | 


如 图 2.20 所 示 ， 当 选中 文件 后 触发 input 的 change 事 件 ， 回 调 函 数 获取 input 元 素 的 files 属 
性 ，files 属 性 返回 FileList 对 象 ， 里 面包 含 了 选中 文件 的 相关 信息 。 如 果 在 input 上 添加 multifile 
属性 ， 则 允许 用 户 添加 多 个 文件 ， 并 且 所 有 选中 的 文件 信息 均 被 添加 到 input 的 files 属 性 的 
FileList 对 象 中 。 
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2.3.6 FileSystem 接 口 


HTML 5 除了 提供 用 于 获取 文件 信息 的 File 对 象 外 ， 还 添加 了 FileSystem 相 关 的 应 用 接 
。FileSystem 对 于 不 同 的 处 理 功 能 做 了 细致 的 分 类 ， 如 用 于 文件 读 取 和 处 理 的 FileReader 
和 FileList 对 象 、 用 于 创建 和 写 入 的 Blob 和 FileWriter 对 象 、 用 于 目录 和 文件 系统 访问 的 
DirectoryReader 和 LocalFileSystem 对 象 等 ，FileSystem 功 能 的 出 现 是 浏览 器 在 文件 系统 上 的 突 
破 ， 具 有 里 程 碑 的 意义 ， 虽然 目前 还 尚未 完全 成 熟 ， 但 足以 让 开发 者 发 挥 更 大 的 想象 空间 。 


1. FileReader 对 象 


FileReader 对 象 专门 用 于 读 取 文件 ， 同 时 可 以 将 文件 转化 为 各 种 格式 信息 。 使 用 
FileReader 对 象 非常 简单 ，FileReader 对 象 实 例 一 共 包 含 4 个 方法 ， 如 表 2.8 所 示 。 


表 2.8 FileReader 对 象 方法 


方法 名 称 说 明 
将 文件 读 取 为 二 进 制 码 


将 文件 读 取 为 DataURL， 一 段 是 以 “data: ”开头 的 字符 串 
将 文件 读 取 为 文本 ， 第 二 个 参数 为 编码 类 型 ， 默 认为 UTF-8 
中 断 读 取 


下 面 通过 示例 展现 FileReader 对 象 中 readAsDataURI 方 法 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 
03 <body> 
04 <input type="file" id="input"><br> <!-- 文件 选择 控件 --> 
05 <img id="img"/> <!-- 图 片 展示 --> 
06 </body> 
07 <script type="text/javascript"> 
08 document .getElementById("input") .addEventListener ("change", 
function () {// 监听 选择 控件 change 事 件 
09 Var fileReader = new FileReader(); 
// 新 建 FileReader 对 象 实例 
10 fileReader.onloadend = function(e) { 
// 监听 实例 loadend 事 件 
ee document .getElementById("img") .src = e.target. 
result; // 设置 图 片 pase64 值 
12 }; 
13 fileReader.readAsDataURL (this.files[0]); // 读 取 文件 内 容 
14 }, false); 


15 </script> 
16 </html> 


提 
| 国 趟 本 节 FileSystem 的 示例 代码 均 在 Chrome 28 下 测试 通过 。 


示例 打开 运行 效果 与 图 2.19 相 同 。 单 击 “ 选 择 文件 ”按钮 ， 选 中 本 地 图 片 ， 此 时 “选择 
文件 ”按钮 下 方 出 现 对 应 选中 图 片 的 内 容 ， 效 果 如 图 2.21 所 示 。 
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选择 文件 | Alien 1 bmp 


图 2.21 FileReader 对 象 readAsDataURI 方法 使 用 


示例 中 ， 当 用 户 选中 图 片 时 ， 触 发 input 元 素 的 change 事 件 ， 在 回调 事件 中 新 建 一 个 
FileReader 对 象 的 实例 用 于 读 取 图 片 文件 内 容 ， 被 读 取 的 图 片 文件 返回 格式 如 下 : 

data: [<MIME-type>] [;charset=<encoding>] [;base64],<data> 
图 片 被 转化 为 DataURL 数 据 ， 即 Base64 格 式 数 据 ， 该 数据 可 以 被 赋予 图 片 元 素 的 src 属 性 
获得 并 显示 。 


棍 _ 
| 甘于 Base64 数 据 格式 的 说 明 可 以 参考 网 站 http://en.wikipedia.org/wiki/Data_URI scheme。 


FileReader 作 为 FileSystem 中 的 一 部 分 ， 通 常用 于 文件 读 取 ， 可 以 结合 上 传 文件 场景 使 
。 下 面 将 介绍 FileSystem 中 其 他 的 部 分 。 


2. FileSystem 接 口 的 其 他 应 用 


在 使 用 FileSystem 对 象 相关 应 用 接口 时 ， 首 先 要 获得 对 沙 箱 文件 系统 的 访问 权限 ， 代 码 
如 下 : 

// 获取 兼容 文件 请 求 对 和 象 

window.requestFileSystem = window.requestFileSystem || window. 

webkitRequestFileSystem; 


// 请 求 获取 浏览 器 沙 箱 文 件 系 统 


window.requestFileSystem(type, size, successCallback, errorCallback) 
window.requestFileSystem 方 法 可 以 传递 4 个 参数 。 


。 type: 包含 window.TEMPORARY 和 window.PERSISTENT 两 种 值 ，window. 
TEMPORARY 表 示 存 储 文件 数据 于 临时 空间 ， 共 享 1GB 的 空间 。window. 
PERSISTENT 存 储 于 持久 空间 ， 按 域名 授权 分 配 ， 需 要 进行 用 户 许可 申请 。 

。 size: 请 求 用 于 存储 空间 的 大 小 ， 以 字 节 计 。 

。 successCallback: 文件 系统 请 求 成 功 回调 函数 。 

。 errorCallback: 文件 系统 请 求 失败 回调 函数 。 


FileSystem 文 件 系统 申请 的 空间 只 能 作用 于 浏览 器 沙 箱 文件 系统 ， 同 时 受到 域名 的 限 
制 ， 并 且 不 具备 用 户 本 地 的 任意 文件 夹 的 读 写 权 限 。 当 使 用 window.TEMPORARY 申 请 浏览 
器 空间 不 需要 对 用 户 进行 授权 ， 如 创建 一 个 MB 的 临时 存储 空间 代码 如 下 ; 


window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function (fle 
system){ 

console.1og ( ' 创建 5mb 临 时 存储 空间 : ' + file_system.name); 
}, errorCallback); 
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如 果 要 进行 永久 空间 的 创建 ， 首 先 需要 进行 用 户 授权 ， 浏 览 器 询问 授权 时 ， 地 址 栏 下 方 
会 出 现 黄色 提示 确认 条 ， 如 图 2.22 所 示 。 


i GC Dlocalhost 


图 2.22 请 求 浏览 器 永久 空间 提示 条 


请 求 永久 空间 代码 如 下 : 


window.webkitStorageInfo.requestQuota (window.PERSISTENT, 5*1024*1024, 
function(bytes) { 

window.requestFileSystem(window.PERSISTENT, bytes, function(file_ 

system){ 
console.log( ' 创建 5MB 永 久 存储 空间 : ' + file_system.name); 

}, errorCallback); 
}, function(e) { 

console.log('Error', e); 
Ds 


临时 空间 与 永久 空间 申请 时 的 错误 回调 函数 相似 ， 均 返回 一 个 FileError 对 象 记录 错误 信 
息 ， 不 过 在 具体 应 用 使 用 时 ， 应 该 将 返回 的 错误 信息 进行 调整 ， 易 于 用 户 理解 ， 错 误 回调 函 
数 代码 如 下 : 


function errorCallback (e) { 


Var msg = 107 

switch (e.code) { 

case FileError.QUOTA EXCEEDED ERR: msg = ' 超 出 允许 最 大 值 ' ; break; 

case FileError.NOT FOUND ERR: msg = ' 没 有 找到 指定 地 址 节点 '; 
break; 

case FileError.SECURITY ERR: msg = ' 访 问 拒绝 '; break; 

case FileError.INVALID MODIFICATION ERR: msg = ' 不 被 允许 的 修改 请 求 '; 
break; 

case FileError.INVALID STATE ERR: msg = ' 不 被 允许 的 执行 对 象 接口 状态 ' ; 
break; 

case FileError.ENCODING ERR: mag = ' 路 径 不 完整 或 者 无 效 '; break; 

case FileError. NO_MODIFICATION ALLOWED ERR: mag = "系统 阻止 写 入 文件 或 目 
录 '; break; 

case FileError. NOT READABLE ERR: mag = ' 文 件 或 目录 没有 读 权限 ' ; 
break; 

case FileError. PATH EXISTS ERR: mag = ' 文 件 或 目录 已 存在 相同 路 径 '; 
break; 

case FileError. TYPE MISMATCH ERR: mag = ' 错 误 的 入 口 目录 类 型 '; break; 

default: msg = ' 未 知 错误 '; break; 

] 

console.log('Error: ' + msg); 


. 


在 使 用 FileSystem 创 建 浏览 器 沙 箱 文件 和 目录 前 ， 笔 者 推荐 一 款 用 于 查看 当前 域名 沙 箱 
文件 的 Chrome 插 件 ， 插 件 通 过 FileSystem 应 用 接口 展示 临时 和 永久 两 种 类 型 的 文件 信息 ， 并 
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具备 清空 本 域名 下 的 沙 箱 文件 内 容 功 能 ， 该 插件 名 为 HTML 5 FileSystem Explorer， 用 户 可 以 
访问 谷歌 官网 的 安装 地 址 https://chrome.google.com/webstore/detail/html5-filesystem-explorer/nh 
njmpbdkieehidddbaeajffhjockaea， 插 件 使 用 截图 如 2.23 所 示 。 


D Tndex of / x 
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图 2.23 Chrome 插 件 HTMLS FileSystem Explorer 


3. FileSystem 的 应 用 示例 
下 面 通过 创建 一 个 临时 的 沙 箱 文件 来 了 解 FileSystem 的 具体 使 用 ， 代 码 如 下 : 
// 获取 兼容 文件 请 求 对 象 


window.requestFileSystem = window.requestFileSystem || window. 
webkitRequestFileSystem; 
window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(fs){ 
fs.root.getFile(' 测 试 .txt', {create: true, exclusive: true}, 
function (file) { // 创建 文件 
console.1og( ' 创 建文 件 成 功 : ' + file.name); // 成 功 返 回 提示 
}, errorCallback); 
}, errorCallback); 


所 _ 
| 臣下 。 示例 代码 两 处 的 errorCallback 函 数 与 先前 相同 。 


代码 复制 到 页 面 后 ， 不 能 直接 用 浏览 器 打开 该 页 面 ， 需 要 将 包含 代码 的 页 面 安置 于 Web 
服务 器 ， 如 IIS、Ngnix、Apache 等 。 通 过 URL 访 问 浏览 器 包含 代码 的 文件 地 址 ， 示 例 代 码 执 
行 完毕 以 后 ， 浏 览 器 的 localhost 域 名 下 的 沙 箱 文件 系统 创建 了 一 个 空白 的 “测试 .txt” 文 件 ， 
使 用 Chrome 插 件 HTMLS FileSystem Explorer 查 看 刚刚 创建 的 文件 ， 如 图 2.24 所 示 。 
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图 2.24 创建 “测试 .txt” 空 文件 
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向 其 中 写 入 数据 ， 代 码 如 下 : 


“测试 .txt” 文 件 创建 完毕 后 ， 下 面 将 通过 FileSystem 的 接 


window.requestFileSystem || window. 


window.requestFileSystem 


webkitRequestFileSystem; 
window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function (fs){ 
fs.root.getFile(' 测 试 .txt'， {create: false}, function(file) { 


// 获取 创建 的 文件 
file.createWriter (function (fileWriter) { 
// 创建 写 入 对 象 


fileWriter.seerk (fileWriter.length); 


// 在 指定 位 置 写 入 


var blob = new Blob(['Hello World']); 
// 初始 化 文本 数据 对 象 
fileWriter.write (blob); 


// 写 入 数据 


Ds 
]}) 7 
]) 7 
执行 完 写 入 脚本 以 后 ， 使 用 Chrome 插 件 HTML 5 FileSystem Explorer 查 看 刚刚 写 入 的 “ 测 


试 .txt” 文 件 ， 效 果 如 图 2.25 所 示 。 


世 
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图 2.25 向 “测试 txt” 文件 写 入 数据 


通过 插件 看 到 ，“ 测 试 .kxt” 文件 被 写 入 了 11 字 节 的 数据 ， 即 Hello World 共 11 字 节 。 同 时 
可 以 在 浏览 器 地 址 栏 内 输入 “filesystem:http://localhost/temporary/ 测 试 .txt” 进 行 访问 ， 效 果 如 


图 2.26 所 示 。 


D filesysten:http://local x 
人 3 CC Dfilesysten:http://localhost/tenporary/ 测 试 .txt 7? @ 三 


Hello World 


图 2.26 通过 浏览 器 访问 文件 系统 内 容 
将 “测试 .txt” 文 件 文件 删除 ， 代 码 如 下 : 


= window.requestFileSystem || window. 


最 后 使 用 FileSystem 对 象 的 接 


window.requestFileSystem 
webkitRequestFileSystem; 
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window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(fs){ 


}) 


fs.root.getFile(' 测 试 .txt'，, {create: false}, function(file) { 


// 获取 文件 
file.remove (function() { // 删除 文件 
console .1og (' 文 件 删 除 成 功 ') ; // 删除 成 功 


]) 7 
es 


执行 脚本 后 ， 文 件 删除 成 功 ， 此 时 使 用 Chrome 插 件 HTML 5 FileSystem Explorer 查 看 效果 
如 图 2.23 所 示 ， 沙 箱 文件 系统 被 清空 。 

刚刚 从 文件 的 新 建 、 修 改 、 删 除 三 个 方面 介绍 了 FileSystem 接 口 的 应 用 ， 实 际 上 只 是 
FileSystem 接 口 应 用 的 很 小 一 部 分 ， 更 多 的 使 用 方法 和 场景 可 以 参考 本 书 的 示例 部 分 。 如 此 
强大 的 FileSystem 接 口 ， 让 Web 开 发 人 员 拥 有 了 更 大 的 施展 和 发 挥舞 台 ， 同 时 HTML 5 与 文件 
相关 的 应 用 操作 还 可 以 解决 实际 开发 中 的 很 多 问题 ， 下 面 例 举 了 部 分 应 用 场景 : 


实现 断 点 续 传 。 读 取 本 地 文件 保存 至 浏览 器 的 文件 系统 沙 箱 内 ， 并 逐 块 上 传 ， 如 果 
系统 异常 关闭 ， 再 次 打开 时 也 能 从 浏览 器 文件 系统 中 获取 ， 并 继续 上 传 。 

存放 网 络 游戏 中 的 图 片 和 相关 资源 。 将 游戏 中 新 的 关卡 和 功能 在 运行 后 台 时 自动 加 
载 至 浏览 器 本 地 文件 系统 ， 当 游戏 调用 时 可 以 直接 读 取 文件 ， 大 大 减少 了 服务 器 的 
消耗 ， 同 时 达到 比 网 络 下 载 离线 快 得 多 的 速度 。 

离线 的 图 片 编辑 功能 。 开 发 的 图 片 网 页 应 用 ， 可 以 将 编辑 完 的 图 片 直接 存 入 浏览 器 
文件 系统 ， 待 下 次 使 用 时 可 以 直接 应 用 。 

离线 的 视频 播放 器 。 可 以 在 没有 下 载 完整 个 视频 时 进行 部 分 播放 ， 同 时 还 能 选择 在 
不 同 的 时 间 点 之 间 进 行 选择 播放 ， 截 取 视 频 的 一 部 分 。 

离线 的 邮箱 系统 。 保 存 邮 件 中 的 附件 内 容 ， 当 浏览 器 处 于 断 网 状态 ， 可 以 将 附件 和 
邮件 内 容 进 行 保存 ， 待 联网 时 重新 进行 发 送 。 


以 上 畅想 的 内 容 远 不 止 未 来 HTML 5 所 带 来 的 全 部 面貌 ， 以 往 无 法 实现 的 功能 将 发 生 改 
变 ， 未 来 的 浏览 器 一 切 皆 有 可 能 。 


2.3.7 jQuery html5Validate HTML 5 表单 验证 插件 


之 前 的 章节 已 经 对 HTML 5 新 增 的 表单 元 素 和 属性 做 过 介绍 ， 极 大 地 增强 了 开发 体验 ， 
同时 也 给 传统 的 表单 验证 插件 开发 提供 了 方向 。 未 来 的 表单 设计 应 该 遵循 W3C 的 表单 验证 规 
范 ， 本 节 将 介绍 的 jQuery html5Validate 正 式 基于 这 种 设计 开发 的 新 一 代表 单 验证 插件 。 

首先 该 款 jQuery html5Validate 插 件 是 基于 jQuery 并 由 国人 设计 的 表单 验证 插件 ， 设 计 秉承 
了 HTML 5 表单 的 设计 风格 ， 如 HIML 5 中 要 表示 一 个 文本 输入 框 为 必 填 时 ， 代 码 如 下 : 


<input type="number" required> 


插件 的 HTML 结 构 与 原生 语法 相同 ， 使 用 时 只 需要 引入 对 应 的 脚本 和 添加 插件 初始 化 肢 
本 ， 代 码 如 下 : 


01 
02 


<!1DOCTYPE html> 
<html> 


|HTML 5 网 页 开发 实例 详解 


03 <head> 
04 <script src="jquery.min.js"></script>  // jQuery 脚本 
05 <script src="jquery-html5Validate.js"></script> 
// 插件 脚本 
06 </head> 
07 <body> 
08 <form> 
09 <input type="number" required> // 不 为 空 输入 框 
10 </form> 
ho <script> 
12 $ ("form") .html5Validate (); // 插件 初始 化 表单 
3 </script> 
14 </body> 
15 </html> 


html5 Validate 插 件 支持 目前 所 有 HTML 5 的 input 类 型 验证 ， 如 类 型 为 email、number、 
tel、url， 同 时 还 支持 HTML 5 的 验证 属性 ， 如 step、min、max、required、patern、multiple 
等 ， 另 外 还 扩展 了 部 分 类 型 ， 如 zipcode (表示 输入 类 型 为 邮编 ) 、zhcn (表示 输入 类 型 为 中 
区 六 和 

html5Validate 在 初始 化 表单 时 ， 还 可 以 选择 添加 配置 参数 ， 默 认 值 为 tue， 如 表 2.9 所 示 。 


表 2.9 html5Validate 初 始 化 配置 参数 


参数 名 称 说 明 
布尔 型 。 是 否 取消 现代 浏览 器 的 内 置 验证 


包含 返回 值 的 函数 ， 插 件 自 带 验证 以 外 的 其 他 脚本 或 者 验证 


参数 使 用 代码 如 下 : 


$("form") .htm15Validate (function() { 
console.1og ("验证 通过 "); 
] vi{ 
novalidate : true, 
submitEnabled : true, 
labelDrive : true 
validate : function() { 
return true; 
} 
D); 


jQuery html5Validate 在 设计 上 相当 巧妙 ， 避 开 了 传统 表单 验证 插件 设计 时 过 多 的 脚本 参 
数 配 置 ， 一 切 遵循 W3C 的 规范 ， 是 国内 表单 插件 设计 中 的 佼佼 者 。 
| 提 - jQuery html5Validate 插 件 文档 地 址 为 http://www.zhangxinxu.com/wordpress/?p=2857， 插 件 示例 
区 可 以 参考 http://www.zhangxinxu.com/study/201212/iquery-html5validate-plugin-test.html。 
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2:4 图 形 绘制 


HTML 语 言 经 历 20 多 年 的 发 展 ， 现 今 已 经 成 长 为 最 广泛 的 编程 语言 ， 在 互联 网 上 随处 可 
见 ， 虽 然 HTML 具 备 很 多 优点 ， 但 始终 没有 完全 解决 图 形 绘制 问题 ， 并 且 没 有 提供 一 个 成 熟 
的 解决 方案 ， 这 也 是 Flash 在 互联 网 领域 仍 存在 的 根源 。 在 HIML 5 出 现 之 前 ，HTML 已 经 存 
在 一 些 技术 可 以 绘制 图 形 ， 常 用 的 基于 XML 的 技术 绘制 ， 如 VML 和 SVG， 都 能 够 良好 地 支持 
矢量 图 形 在 Web 页 面 上 的 显示 ， 同 时 提供 一 些 事件 和 动态 机 制 。 后 来 ，HTML 5 Canvas 出 现 
后 ， 从 某 方面 弥补 了 过 去 的 不 足 ， 基 于 画布 的 绘制 ， 让 开发 者 更 容易 操作 页 面 上 的 像素 级 内 
容 。 不 过 由 于 历史 原因 ， 市 面 上 各 种 浏览 器 兼容 情况 不 同 ， 对 于 要 求 兼 容 众 多 浏览 器 和 终端 
设备 的 应 用 ， 可 以 通过 浏览 器 类 型 判断 ， 如 VML 在 正中 使 用 ， 其 他 不 支持 Canvas 的 浏览 器 采 
SVG， 笔 者 推荐 使 用 第 三 方 开源 类 库 解 决 图 形 绘制 问题 ， 如 Raphael 图 形 类 库 和 本 节 将 要 介 
绍 的 Paperjs 矢 量 图 形 类 库 。 


2.4.1 Canvas 是 什么 


Canvas 是 HTML 5 新 增 的 元 素 特性 ， 允 许 脚 本 语言 动态 泻 染 绘 制图 形 ， 如 可 以 用 Canvas 画 
图 、 合 成 图 像 或 者 制作 动画 。 

Canvas 最 早 在 苹果 公司 的 Mac OS X Dashboard 上 被 引入 ， 后 来 被 内 置 于 Safari 浏 览 器 内 。 
之 后 在 Firefox、Opera、Chrome 的 推动 下 ，W3C 将 Canvas 纳 为 HTML 5 的 一 部 分 。 正 在 Canvas 
的 支持 上 仍然 比 其 他 浏览 器 慢 了 一 步 ， 直 到 IE 9 才 开 始 支持 Canvas 元 素 。 


要 了 解 苹果 公司 的 Mac OS X Dashboard 可 前 往 网 站 http://www.apple.com/macosx/features/ 
区 dashboard/。 


Canvas 由 绘制 区 域 HTML 代 码 的 属性 决定 宽 高 ， 同 时 JavaScript 可 以 访问 Canvas 元 素 区 
域 ， 通 过 Canvas 提 供 的 一 套 完成 绘图 应 用 程序 接口 生成 图 形 。Canvas 与 VML 和 SVG 最 大 的 区 
别 在 于 ，Canvas 有 一 套 完 全 基于 JavaScript 脚 本 语言 绘制 的 应 用 程序 接口 ， 而 VML 和 SVG 使 用 
XML 文档 描述 绘制 图 形 。 


2.4.2 什么 情况 下 用 Canvas 


HTML 5 出 现 后 ， 图 形 绘制 使 用 方面 开发 者 一 直 都 拿 SVG 与 Canvas 进 行 比 较 ， 下 面 将 两 
项 技术 做 一 个 对 比 ， 如 表 2.10 所 示 。 


表 2.10 SVG 与 Canvas 比 较 


Canvas 


与 分 辩 率 无 关 ， 放 大 或 缩小 图 形 质量 不 会 下 降 可 以 控制 画布 上 的 每 个 像 系 ， 绘 制 出 的 是 位 图 


多 个 元 系 节 点 组 成 
到 形 允许 CSS 和 脚本 修改 图 形 完全 由 脚本 修改 
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( 续 表 ) 
Canvas 
制作 动画 需要 不 断 重 复 绘 制 画面 


有 要 千 央 他 技 术 实 责 
技术 的 选择 对 于 开发 后 期 的 维护 起 到 了 至 关 重 要 的 作用 ， 通 常情 况 下 ， 当 应 用 需要 处 理 


点 阵 图 时 ， 如 切割 图 片 、 去 除 红眼 ， 那 么 请 选择 使 用 Canvas。 如 果 想 开发 一 款 对 速度 要 求 较 
高 的 网 页 游戏 ， 也 可 以 选择 使 用 Canvas， 如 比较 著名 的 游戏 Cut The Rope (中文 名 割 绳 子 ) 使 
用 Canvas 开 发 了 一 个 测试 版 本 ， 地 址 为 http:Wwww.cuttherope.ie/。 但 是 遇 到 一 些 数据 可 视 化 的 


图 表 时 ， 要 求 图 形 能 在 不 同 分 辩 率 下 正常 显示 ， 应 使 用 VG， 这 时 候 使 用 Canvas 开 发 就 不 是 


一 个 明智 的 选择 。 


2.4.3 检测 浏览 器 对 Canvas 的 支持 情况 


检测 浏览 器 是 否 支 持 Canvas 操 作 通常 使 用 特征 检测 法 ， 即 判断 检测 对 象 上 是 否 含有 特 


定 的 属性 或 者 方法 。 在 Canvas 对 象 上 都 会 包含 一 个 名 为 getContext 的 方法 ， 如 果 浏 览 器 支持 
Canvas， 就 代表 该 方法 存在 ， 检 测 代码 如 下 : 


function is_ supports canvas(){ 
return !!document.createElement('canvas') .getContext; 


} 
不 过 由 于 历史 的 原因 ，Canvas 的 检测 并 不 会 如 此 简单 。 市 面 上 有 些 浏 览 器 实现 了 部 分 


Canvas 应 用 接口 ， 但 没有 加 入 与 Canvas Text 相 关 的 功能 ， 那 么 使 用 上 述 方法 检测 后 仍然 无 法 
完整 使 用 Canvas。 下 面 要 做 的 是 对 刚才 的 方法 进行 强化 ， 增 强 后 的 代码 如 下 : 


function is_supports canvas(){ 
Var cvs = document .createElement ('canvas'); 
if(!cvs.getContext ) return false; 
// 首选 判断 getcontext 方 法 是 否 存 在 
return typeof cvs.getContext('2d') .fillText == '‘'function'; 
// 判断 是 否 含 有 fi11Text 方 法 
} 


通常 检测 浏览 器 是 否 支持 指定 的 HTML 5 功能 ， 按 先后 顺序 分 为 4 个 步骤 ， 前 面 曾经 介绍 
这 里 再 复习 一 遍 : 


(1) 检查 浏览 器 全 局 对 象 是 否 支 持 指定 的 对 象 属性 

(2) 创建 元 素 ， 检 查 元 素 是 否 存在 指定 的 属性 。 

(3) 创建 元 素 ， 检 查 元 素 是 否 存 在 指定 的 方法 ， 同 时 检查 方法 返回 值 。 

(4) 创建 元 素 ， 给 元 素 设 定 HIML 5 的 特有 属性 值 ， 检 测 被 赋值 的 属性 是 否 保存 了 设 定 值 。 


2.4.4 在 页 面 中 加 入 Canvas 


Canvas 在 页 面 上 的 使 用 从 元 素 定 义 开始 ， 代 码 如 下 : 


<canvas width="150"” height="150"></canvas> 
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Canvas 元 素 拥有 width 和 height 属 性 ， 两 个 属性 均 可 选 ， 并 且 可 以 用 DOM 属 性 或 者 CSS 来 
设置 ， 如 果 不 指定 宽 高 ， 则 会 默认 为 宽 300 像 素 和 高 150 像 素 ， 通 过 CSS 设 置 Canvas 的 宽 高 有 
的 时 候 会 出 现 泻 染 变形 ， 建 议 尝 试 采用 设置 Canvas 的 width 和 height 属 性 。 

很 多 老 一 代 的 浏览 器 不 支持 Canvas， 这 时 候 需要 对 不 支持 Canvas 的 浏览 器 做 出 提示 。 提 示 的 
设置 非常 简单 ， 只 需要 在 Canvas 的 元 素 内 插入 提示 文本 内 容 ， 不 支持 Canvas 的 浏览 器 会 将 其 识别 
为 未 知 标签 兼容 泻 染 成 为 文字 信息 ， 而 支持 Canvas 的 浏览 器 会 做 出 正确 的 泻 染 ， 代 码 如 下 : 

<canvas width="150" height="150"> 您 的 浏览 器 不 支持 canvas， 请 升级 后 再 使 用 ! 

</canvas> 

当 Canvas 被 添加 到 页 面 上 后 ， 初 始 化 泻 染 是 空白 的 ， 想 要 在 上 面 通过 脚本 进行 图 形 绘制 
首选 需要 获得 泻 染 的 上 下 文 ， 通 过 Canvas 元 素 对 象 的 getContext 方 法 获得 ， 该 方法 在 上 一 节 浏 
览 器 Canvas 检 测 的 时 候 已 经 学 习 过 如 何 使 用 。 

下 面 是 使 用 Canvas 绘 制 一 个 矩形 的 示例 ， 代 码 如 下 ;: 


01 <html> 
02 <head> 
03 <script> 
04 window.onload = function() { // 资源 加 载 结束 后 触发 
05 Var canvas = document .querySelector ("canvas"); 
// 获取 canvas 元 素 
06 if (canvas.getContext) { 
07 Var ctx = canvas.getContext ("2d"); 
// 获取 泻 染 上 下 文 
08 CtX.fil1Style = "rgb(200,50,0)"; 
// 填充 颜色 
09 ctx fillIRecE (507 507 507 50)7 // 绘制 矩形 
10 } 
hh | 
12 </script> 
13 </head> 
14 <body> 
I <canvas width="150" height="150"> 您 的 浏览 器 不 支持 canvas， 请 升级 后 再 使 


用 ! </canvas> 
16 </body> 
17 </html> 


示例 的 运行 效果 如 图 2.27 所 示 。 


CC Dfi:/w@=E 


图 2.27 使 用 Canvas 绘 制 一 个 甜 形 
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2.4.5 SVG 是 什么 


上 一 节 一 直 将 SVG 拿 来 与 Canvas 做 比较 ， 大 致 可 以 了 解 到 SVG 可 以 用 来 处 理 哪些 问题 。 
SVG 是 Scalable Vector Graphics 的 缩写 ， 中 文 意思 是 可 缩放 矢量 图 形 ， 是 基于 XML (可 扩展 标 
记 语 言 ) 用 来 描述 二 维 矢量 图 形 的 一 种 图 形 格式 。 

SVG 诞 生 于 2000 年 的 8 月 ， 由 W3C (国际 互联 网 标准 组 织 ) 制定 ， 由 于 采用 文本 格式 的 
描述 性 语言 来 泻 染 图 片 ， 因 此 产生 的 图 片 和 图 像 分 辩 率 无 关 ， 即 使 缩放 图 形 质量 也 不 会 下 


。 基于 XML， 继 承 了 XML 的 扩 平 台 和 可 扩展 的 特性 。 

。 采用 文本 描述 图 形 对 象 ， 利 于 搜索 引擎 通过 文本 内 容 搜 索 图 片 信 息 。 

。 良好 的 交互 和 动态 特性 ， 可 以 在 其 中 嵌入 动画 ， 通 过 脚本 收缩 、 旋 转调 整 图 形 。 

。 对 DOM 支 持 完整 ， 可 以 通过 脚本 获取 元 素 ， 监 听 元 素 事件 。 

。 体积 小 下 载 快 ， 与 GIF 和 JPG 格 式 的 图 片 相 比 具有 较 小 的 体积 ， 在 互联 网 上 传输 有 明 
显 优势 。 


2.4.6 SVG 的 使 用 
于 SVG 不 是 本 书 的 重点 ， 下 面 通过 一 个 简单 的 示例 介绍 SVG 使 用 的 初步 功能 ， 代 码 如 下 : 


01 <?xml version="1.0" standalone="no"?> 

02 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ 
Graphics/SVG/1.1/DTD/svgll.dtd"> 

03 <svg width="100%" height="100%" version="1.1" xmlns="http://www. 
w3.0rg/2000/svg"> 


04 <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" 
fill="blue"/> 
05 </svg> 


以 svg 为 后 缀 保存 文件 ， 使 用 Chrome 浏 览 器 打开 ， 效 果 如 图 2.28 所 示 。 


口 ms eve 
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图 2.28 使 用 SVG 画 圆 


示例 代码 虽然 简单 ， 但 是 包含 了 很 多 比较 陌生 的 属性 和 节点 信息 。 
第 01 行 ， 里 面 定义 了 XML 文件 的 声明 ， 这 里 有 一 个 很 关键 的 属性 standalone， 表 示 该 
SVG 文件 是 否 引 用 外 部 文件 ， 示 例 中 standalone 属 性 被 赋值 为 no 意味 着 该 文件 会 引 个 外 部 
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文件 ， 地 址 即 “http://www.w3.org/Graphics/SVG/1.1/DTD/svgll1.dtd”。 

上 面 提 到 的 DTD 文 件 “http://www.w3.org/Graphics/SVG/1.1/DTD/svgl11.dtd” 主 要 用 于 
SVG 规范 ， 里 面包 含 了 所 有 SVG 人 允许 使 用 的 元 素 。 

第 03 行 是 整个 绘图 SVG 文件 的 根 元素 svg， 类 似 于 HTML 文件 中 的 html 根 元 素 。width 和 height 
属性 定义 SVG 的 宽 高 ，version 属 性 定义 使 用 SVG 的 版 本 ，xmhns 属 性 定义 SVG 的 命名 空间 。 

第 04 行 的 circle 元 素 用 来 创建 一 个 圆 。cx 和 cy 属性 定义 圆 中 心 的 x 和 y 轴 坐标 ， 黑 认 设置 均 
为 0。r 属 性 用 来 定义 圆 的 半径 。stroke 和 stroke-width 属 性 用 来 设置 显示 图 形 的 轮廓 ，stroke 这 
里 设置 为 黑色 边框 ，stroke-width 设 置 为 2 像素 的 边框 。fill 属 性 用 来 设置 图 形 内 填充 的 颜色 。 


提 
| 臣下 。 所 有 标签 的 规则 必须 严格 遵循 W3C 规 范 ， 开 启 标签 必须 有 对 应 的 闭合 标签 。 


2.4.7 WebGL 是 什么 


WebGL 规 范 由 Khronos Group 协会 在 2011 年 3 月 的 美国 洛杉矶 举办 的 游戏 开发 大 会 上 发 
布 ， 该 标准 允许 把 JavaScript 和 OpenGL ES 2.0 相 结合 为 HTML 5 Canvas 提 供 硬 件 3D 加 速 泻 染 ， 
使 开发 人 员 可 以 借助 系统 显卡 在 浏览 器 里 展现 3D 场 景 和 模型 ， 使 用 者 可 以 在 不 安装 插件 的 情 
况 下 体验 3D 图 形 技术 。 


Khronos Group 成 立 于 2000 年 1 月 ， 由 包括 3Dlabs、AII、Discreet、Evans & Sutherland、Intel、 
[臣下 Nvidia、SGI 和 Sun Microsystems 在 内 的 多 家 国际 知名 多 媒体 行业 领导 者 创立 ， 致 力 于 发 展开 
S 放 标 准 的 应 用 程序 接口 ， 以 实现 在 多 种 平台 和 终端 设备 上 进行 富 媒体 创作 、 加 速 和 回放 。 


前 WebGL 标 准 已 经 在 Firefox、Safari、Chrome 浏 览 器 上 得 到 了 支持 ， 微 软 将 在 IE 11 中 
加 入 WebGL 功 能 ， 相 信 不 久 的 将 来 开发 者 可 以 通过 WebGL 展 现 各 种 3D 模 型 和 场景 ， 推 出 更 
多 基于 3D 的 网 站 和 游戏 。 


2.4.8 WebGL 的 使 用 


WebGL 对 于 Web 开 发 者 来 说 ， 提 供 前 所 未 有 的 想象 空间 ， 打 开 了 一 个 面向 3D 技 术 的 新 领 
域 ， 从 此 不 需要 借助 Flash 或 Silverlight 等 浏览 器 插件 也 能 制作 出 丰富 的 视觉 交互 体验 。 目 前 已 
经 涌现 出 很 多 使 用 WebGL 技 术 开 发 的 非常 厉害 的 作品 。 

谷歌 推出 了 WebGL 版 的 Google Map， 用 户 可 以 前 往 地 址 https://maps.google.com/ 查 看 。 进 
入 网 站 后 ， 网 页 会 判断 浏览 器 支持 WebGL 的 情况 ， 当 确认 用 户 的 浏览 器 支持 WebGL 时 ， 页 面 
左 侧 会 出 现 提 示 ， 如 图 2.29 所 示 。 

使 用 了 WebGL 技 术 后 ， 地 图 效果 得 到 极 大 的 提升 ， 增 加 了 3D 图 形 显示 ， 地 图 拖 动 切换 更 
加 平滑 ， 同 时 还 带 有 45” 的 视角 旋转 功能 。 

另外 谷歌 还 在 Chrome 实 验 室 里 提供 了 很 多 WebGL 的 实验 产品 ， 让 人 叹为观止 ， 欣 赏 作品 
请 前 往 站 点 http://www.chromeexperiments.com/webgl。 其 中 有 一 款 关于 Google Maps 的 游戏 ， 
相信 一 定 会 让 用 户 眼 睛 为 之 一 亮 ， 游 戏 地 址 为 http://www.playmapscube.com/， 游 戏 截图 如 图 
2.30 所 示 。 
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™ Wantto try something new? 得 


。 Take MapsGL. our new experimental maps 
experience, for a spin 

。3D buildings and seamless 45* aerial view 
rotations 

。 ‘Swoop’ quickly from the map view to Street View 
imagery, without a plugin 


MapsGL is our experimental Maps technology 
powered by WebGL, and has certain system 
requirements 


Enabling 


图 2.29 谷歌 地 图 开启 WebGL 功 能 提示 


2.4.9 Paperjs 图 形 库 


图 2.30 Google Maps 地 图 小 游戏 


Paperjs 是 一 个 开源 的 矢量 图 形 脚本 框架 ， 基 于 HTML 5 Canvas 开 发 。 提 供 了 清晰 的 场景 


图 和 文档 对 象 模型 ， 还 有 许多 强大 的 功能 用 
精巧 、 规 范 并 且 干净 。 


来 创建 和 使 用 矢量 图 形 和 贝 塞 尔 曲 线 ， 接 口 设计 


Paper.js 的 中 文教 程 目前 还 很 少 ， 所 以 使 用 者 需要 前 往 官网 http://paperjs.org 的 英文 版 教程 


学 习 使 用 ， 这 对 一 般 的 使 用 者 是 一 个 挑战 ， 


站 点 也 是 工作 的 一 部 分 。 下 面 通过 一 个 示例 
用 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


不 过 作为 一 名 合格 的 前 端 工 作者 ， 习 惯 阅读 外 文 
了 解 使 用 Paperjs， 开 发 使 用 Canvas 的 图 形 绘制 应 


02 <html> 
03 <head> 
04 <script type="text/javascript" src="paper.js"></script> 
<!-- 引入 paper.js --> 
05 <script type="text/paperscript" canvas="canvas"> 
<!-- 执行 脚本 块 --> 
06 function onMouseDrag (event) { 
// 鼠标 拖 动 事件 
07 Var path = new Path.Circle({ 
// 新 建 一 个 圆 形 路 径 实例 
08 center: event.downPoint, 
// 设置 中 心 点 坐标 
09 radius: (event.downPoint - event. 
point) .length， // 设置 圆 形 半径 
10 fillColor: 'white', 
// 设置 填充 颜色 
1 strokeColor: "black' 
// 设置 边框 颜色 
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12 
13 
14 
| 
16 
hh Br | 
18 
1 


Ds; 


</script> 
</head> 
<body> 
<canvas id="canvas" resize></canvas> // 画布 元 素 
</body> 
</html> 


示例 使 用 时 ， 单 击 页 面 某 个 区 域 ， 不 松 开 鼠 标 进行 拖 动 ， 鼠 标 会 以 单 击 点 为 圆心 ， 拖 动 
距离 为 半径 画 圆 ， 松 开 鼠 标 后 圆 形 绘制 完毕 ， 图 2.31 为 笔者 测试 后 绘制 的 效果 图 。 


晶 
二 


图 2.31 使 用 Paperjs 示 例 绘制 效果 题 


Paperjs 项 目 同时 还 被 发 布 在 GitHub 上 ， 了 解 开发 者 最 新 发 布 更 新 动态 可 以 前 往 GitHub， 项 目 
地 址 为 https://github.com/paperjs/paper.js。 


2.5 音频 视频 


音频 视频 作为 HTML 5 的 最 大 亮点 之 一 ， 解 决 了 常年 以 来 使 用 浏览 器 观看 视频 和 音频 都 


不 得 不 安装 Flash 的 问题 。 随 着 HTML 5 的 发 展 ， 各 大 浏览 器 厂商 对 音频 视频 的 支持 ， 加 上 苹 
果 的 iOS 系 统 禁 止 使 用 Flash， 使 得 HTML 5 的 音频 视频 在 这 几 年 内 得 到 了 飞速 的 发 展 ， 各 大 主 


流 视频 


网 站 纷纷 推出 了 完全 使 用 HTML 5 打造 的 视频 编辑 器 。 使 用 HTML 5 的 音频 和 视频 非常 


简单 ， 只 需要 用 到 两 个 标签 audio 和 video， 本 节 将 介绍 这 两 个 标签 的 使 用 和 注意 事项 。 


2.5.1 音频 和 视频 编码 解码 器 


前 ， 所 有 主流 的 浏览 器 都 支持 audio 和 video 元 素 ， 包 括 微软 的 下 9 和 之 后 的 版 本 ， 但 是 


不 同 的 浏览 器 支持 的 编码 解码 器 各 不 相同 ， 幸 运 的 是 HTML 5 在 设计 之 初 考虑 到 了 这 一 点 ， 
并 且 提 供 了 非常 灵活 的 方式 来 使 用 音频 和 视频 功能 。 
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通过 一 个 示例 代码 ， 展 示 在 各 种 新 老 版 本 浏览 器 上 如 何 使 用 视频 的 功能 ， 代 码 如 下 : 


<video> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.webm" type="video/webm "> 
<source src="video.ogv" type="video/ogv "> 
<object type="application/x-shockwave-Flash" data="Flash.swf"> 
<param name="movie" value="Flash.swf" /> 
<param name="Flashvars" value="file=video.mp4" /> 
您 的 浏览 器 不 支持 播放 视频 功能 。 
</objet> 
</video> 


MP4 格 式 在 日 常 的 生活 中 已 经 随处 可 见 ，WebM 和 Ogv 大 家 应 该 还 相对 陌生 。WebM 是 一 
个 开放 、 免 费 的 媒体 文件 格式 ， 最 早 由 谷歌 提出 ， 该 格式 容器 中 包括 了 VP8 和 Ogg Vorbis 音 
轨 。WebM 格 式 效率 非常 高 ， 可 以 在 平板 电脑 和 其 他 一 些 手 持 设备 上 流畅 的 使 用 。Ogv 即 带 有 
Thedora 视 频 编码 和 Vorbis 音 频 编码 的 Ogg 文 件 ， 该 格式 文件 带 有 不 确定 的 版 权 问题 ， 可 能 在 
未 来 的 浏览 器 中 被 慢 慢 淘汰 。 

各 种 格式 的 优 缺 点 不 一 ， 如 WebM 格 式 ， 依 赖 于 Google 和 YouTube 的 推广 ， 并 且 在 硬件 上 
有 良好 的 支持 ， 但 是 由 于 涉及 到 MPEG LA 的 专利 案件 ， 并 且 在 iOS 设 备 到 得 不 到 支持 。 虽 然 
传统 视频 和 音频 编码 技术 经 历 多 年 的 发 展 ， 并 且 相 当 稳 定 ， 但 对 于 浏览 器 ， 原 生 支 持 视频 和 
音频 还 非常 年 轻 ， 仍 然 会 遇 到 重重 阻碍 ， 不 过 规范 和 标准 日 益 完善 ， 如 果 读 者 及 早 的 在 视频 
和 音频 上 做 好 技术 准备 ， 在 未 来 会 得 到 加 倍 的 回报 。 


2.5.2 使 用 脚本 控制 播放 


HTML 5 除了 提供 audio 和 video 元 素 播放 音频 和 视频 资源 外 ， 同 时 还 配套 提供 了 一 系列 的 
方法 、 属 性 和 事件 ， 这 些 方法 、 属 性 和 事件 允许 使 用 JavaScript 操 作 audio 和 video 对 象 。 
audio 和 video 对 象 均 提 供 了 一 些 相 类 似 的 方法 ， 如 表 2.11 所 示 。 


表 2.11 audio 和 video 对 象 方法 
说 明 
| 重新 加 载 音频 或 视频 R 容 | 
| 播放 音频 或 视频 | 
暂停 音频 或 视频 
向 音频 或 视频 添加 字幕 
检测 浏览 器 是 否 支持 音频 或 视频 格式 | 


下 面 通过 一 个 简单 的 视频 播放 示例 介绍 部 分 API 的 使 用 ， 代 码 如 下 : 


pause 
addTextTrack 


canPlayType 


01 <!DOCTYPE HTML> 


02 <html> 

03 <body> 

04 <video src="video.webm" width="480" height="320" 
controls></video> // 视频 播放 元 素 

05 <a href=";" class="play"> 播 放 </a> // 播放 按钮 
06 <a href=";" class="pause"> 暂 停 </a> // 暂停 按钮 
07 </body> 
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08 HCript> 
09 Var video = document .querySelector('video'); 
// 获取 视频 元 素 
10 document .querySelector('a.play'), .addEventListener('click', 
function(e) { // 监听 播放 按钮 单 击 事件 
e.preventDefault () 7 // 阻止 元 素 默认 事件 
12 video.play (); // 播放 视频 
1 全 }vfalse) 
14 document .querySelector('a.pause') .addEventListener('click', 
function (e) { // 监听 暂停 按钮 单 击 事件 
15 e.preventDefault (); // 阻止 元 素 默 认 事 件 
16 video.pause (); // 暂停 视频 
17 }，vfalse) 7 
18 </script> 
19 </html> 


该 示例 是 一 个 最 基本 的 使 用 JavaScript 操 作 视 频 元 素 的 例子 ， 其 中 用 到 了 两 个 关键 方法 
play 和 pause。audio 和 video 元 素 除 了 新 增 许 多 新 的 方法 外 ， 同 时 还 增加 了 诸多 的 属性 ， 如 表 
2.12 所 示 。 


表 2.12 audio 和 video 元 素 属性 
说 明 


URL 


在 实际 开发 中 ， 使 用 JavaScript 操 作 视 频 音频 元 素 往 往 会 遇 到 很 多 浏览 器 的 差异 ， 这 些 
问题 在 本 章 对 应 的 示例 章节 会 给 出 相应 的 解决 方案 ， 同 时 读者 可 以 使 用 目前 比较 成 熟 的 第 三 
方 视频 音频 类 库 解 决 兼容 问题 ， 如 目前 比较 流行 的 基于 HTML 5 的 类 库 video.js， 官 网 地 址 为 
http://www.videojs.com/。 


2.5.3 audio 元 素 和 video 元 素 的 浏览 器 支持 情况 


使 用 audio 和 video 元 素 的 第 一 步 是 要 了 解 浏览 器 的 支持 情况 ， 就 目前 而 言 ，Safari 和 
Chrome 的 支持 情况 最 好 ，Firefox 和 Opera 次 之 ， 正 表现 最 差 。 表 2.13 给 出 了 目前 浏览 器 的 支持 


表 2.13 主流 浏览 器 对 audio 和 video 支 持 情况 


浏览 器 Audio 元 素 Video 元 素 


loperault | 支持 | 持 | 


支持 
IE9+ 支持 支持 
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目前 主流 的 三 种 视频 格式 有 MP4、WebM 和 Ogg， 表 2.14 列 出 了 主流 浏览 器 的 支持 情况 。 


表 2.14 主流 视频 格式 的 浏览 器 支持 情况 


浏览 器 

IE9+ 支持 不 支持 不 支持 
Chrome 6+ 支持 支持 | 支持 | 
Firefox 3.6+ 不 支持 支持 | 支持 | 
Safari 5+ 支持 不 支持 | 不 支持 | 
Opera 10.6+ 不 支持 支持 | 支持 | 


主流 的 音频 格式 有 三 种 : MP3、Wav、Ogg， 表 2.15 列 出 了 主流 浏览 器 的 支持 情况 。 


表 2.15 主流 音频 格式 的 浏览 器 支持 情况 
浏览 器 MP3 Wav Ogg 


另外 ， 移 动 支持 设备 在 未 来 是 一 个 关键 的 发 力 点 ， 目 前 的 情况 也 相当 得 复杂 ， 读 者 有 
兴趣 可 以 查看 文章 http://access.ecs.soton.ac.uk/blog/synotemobile/2012/09/03/html-5-video-and- 
support-in-mobile-browsers/， 了 解 关 于 Android 和 iOS 系 统 下 的 浏览 器 在 音频 和 视频 元 素 上 的 支 
持 情况 。 


2.5.4 音 视频 的 实时 通信 


音 视频 的 实时 通信 即 HIML 5 的 WebRTC 技 术 ， 是 Web Real-Time Communication 的 缩写 ， 
该 技术 主要 用 于 支持 浏览 器 进行 实时 的 语音 对 话 和 视频 通信 。 

在 2011 年 之 前 ， 浏 览 器 实现 语音 对 话 和 视频 通信 技术 需要 通过 安装 插件 或 者 客户 端 等 一 
些 技术 实现 ， 不 论 对 于 用 户 还 是 开发 人 员 都 是 一 个 繁 珊 和 复杂 的 过 程 ， 并 且 还 受到 各 种 专利 
的 影响 。 谷 歌 公 司 在 2010 年 收购 了 Global IP Solutions 公 司 从 而 获得 了 WebRTC 技 术 ， 在 2011 
年 ， 按 照 BSD 协 议 把 该 技术 开源 ， 同 年 W3C 将 WebRTC 技 术 纳 入 HTML 5 成 为 标准 的 一 部 分 。 
最 新 Android 系 统 上 的 Chrome 版 本 也 加 入 了 WebRTC 技 术 。 

WebRITC 技 术 可 以 让 Web 开 发 者 轻松 的 基于 浏览 器 就 能 开发 出 丰富 的 实时 媒体 应 用 ， 帮 
助 网 页 应 用 开发 语音 通话 、 视 频 聊天 、P2P 文 件 分 享 等 功能 ， 而 不 需要 安装 任何 插件 ， 同 时 
开发 者 也 不 需要 关心 多 媒体 的 数字 信号 处 理 过 程 ， 只 需要 使 用 JavaScript 即 可 实现 ， 图 2.32 为 
WebRTC 的 技术 架构 图 。 


66 


第? 章 HTML 5 的 整体 特性 


ED Pt veo worers ol bruowe rae SOD onceauewyooes na 
图 2.32 WebRTC 的 技术 架构 题 
WebRTC 技 术 由 三 部 分 组 成 。 


。 MediaStream: 本 地 的 音频 视频 流 或 来 自 远 端 浏 览 器 的 音频 视频 流 。 
。 PeerConnection: 执行 音频 视频 调用 ， 支 持 加 密 和 带宽 控制 。 
。 DataChannel: 采用 点 对 点 传输 ， 传 输 常 规 数据 。 


下 面 通过 一 个 示例 演示 如 何 使 用 浏览 器 WebRTC， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 

03 <body> 

04 <video autoplay></video> <!-- 视频 播放 元 素 --> 

05 <script> 

06 try { // 使 用 WebKit 核 心 下 的 getUserMedia 方 法 
07 navigator.webkitGetUserMedia({audio: true, video: true}, 
successCallback, errorCallback); 

08 ee {ey ot 

09 navigator.webkitGetUserMedia ("video,audio", 
successCallback, errorCallback); 

10 } 

二 function successCallback(stream) { // 成 功 回调 并 设置 video 元 素 
下 2 document .querySelector('video') .src = window.webkitURL. 
createObjectURL (stream); 

人 3 上 

14 function errorCallback(error) { // 失败 回调 返回 错误 信息 
15 console.1og(' 发 生 错 误 ， 编号 : ' + error.code); 
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16 } 

17 </script> 

18 </body> 

19 </html> 

将 上 述 代 码 保存 至 后 缀 为 html 的 文件 ， 并 放置 于 Web 服 务 器 ， 如 IIS、Apache、Nginx 
等 。 使 用 最 新 Chrome 浏 览 器 打开 页 面 地 址 ， 浏 览 器 会 提示 是 否 启 用 摄像 头 和 麦克 风 ， 如 图 
2.33 所 示 。 


DD localhost/WebRTCDeno. hl x 


和 © 口 localhost/YebRTCDeno. htn 


国 ( http://1ocalhost/ 想 要 使 用 您 的 摄像 头 和 麦克 风 。 | 允许] 了 解 详情 x 


图 2.33 浏览 器 提示 是 否 启用 摄像 头 和 麦克 风 


击 浏览 器 提示 条 中 的 “人 允许 ”按钮 ， 此 时 浏览 器 内 出 现 一 个 宽 640 像 素 、 高 480 像 素 的 
视频 窗口 ， 显 示 内 容 为 用 户 摄像 头 拍 摄 视频 。 

随 着 WebRTC 的 发 展 和 各 大 技术 巨头 的 支持 ， 虽 然 标准 尚未 完全 成 熟 ， 但 足以 给 开发 者 
带 来 前 所 未 有 的 惊喜 ，Web 开 发 人 员 可 以 完全 基于 浏览 器 开发 音频 视频 实时 在 线 应 用 。 目 
前 , 已 经 出 现 了 一 批 颇具 实力 的 类 库 ， 如 webRTC.io 和 WebRTC-Experiment 等 。 


BSD 协 议 是 Berkeley Software Distribution 的 缩写 ， 中 文 意思 为 伯克利 软件 发 行 版 ， 是 一 整套 软件 发 
| 力行 版 的 统称 ， 是 自由 软件 中 使 用 最 广泛 的 许可 证 之 一 。BSD 最 初 所 有 者 是 加 州 大 学 董事 会 。 该 协 
议 可 以 自由 的 使 用 并 且 修 改 源 代码 ， 也 可 以 将 修改 后 的 代码 作为 开源 或 者 专利 软件 再 发 布 。 


2.6 地理 位 置 


地 理 位 置 是 HTML 5 非常 重要 且 诱 人 的 特性 之 一 ， 尤 其 在 当今 移动 互联 网 时 代 更 显得 价 
值 连城 。 开 发 者 只 需要 简单 的 几 行 代码 就 可 以 轻松 获取 用 户 的 地 理 位 置信 息 ， 借 助 这 些 信息 
可 以 开发 基于 位 置信 息 的 高 级 应 用 ， 将 虚拟 世界 和 现实 世界 整合 在 一 起 ， 以 一 种 难以 捉摸、 
变化 莫 测 的 方式 出 现在 大 众 的 眼前 。 本 节 将 向 读者 介绍 HTML 5 中 这 一 项 伟大 的 技术 。 


2.6.1 纬度 和 经 度 坐标 


纬度 和 经 度 是 一 种 利用 三 度 空间 的 球面 来 定义 地 球 上 空间 的 球面 坐标 系统 ， 能 够 标示 地 
球 上 的 任何 一 个 位 置 。 
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谈 到 经 纬度 ， 可 以 追溯 到 公元 前 344 年 ， 亚 历 山大 渡海 南侵 ， 随 军 的 地 理学 家 尼 尔 库 斯 
沿途 搜索 材料 ， 准 备 绘制 一 幅 世 界 地 图 。 尼 尔 库 斯 发 现 沿 着 亚历山大 东 征 的 路 线 ， 由 西向 

无 论 季 节 变 换 与 日 照 长 短 都 很 相仿 。 于 是 第 一 次 在 地 球 上 划 出 了 一 条 纬 线 ， 这 条 线 从 直 
布 罗 陀 海峡 起 ， 沿 着 托 鲁 斯 和 喜马拉雅 山脉 一 直到 太平 洋 。 

经 线 又 称 为 子午 线 ， 定 义 为 地 球 表面 连接 南北 两 极 的 半圆 关 。 任 何 两 根 经 线 的 长 度 相 
同 ， 相 交 于 南北 两 极 ， 每 根 经 线 都 有 相对 应 的 值 ， 称 为 经 度 。 纬 线 定义 为 地 球 表面 某 个 点 随 
着 地 球 自转 所 形成 的 轨迹 ， 任 何 一 根 纬 线 都 是 圆 形 而 且 两 两 平行 。 

经 1884 年 国际 会 议 协商 ， 决 定 以 通过 英国 伦敦 格林 尼 治 天 文 台 〈 原 址 ) 的 经 线 为 起 始 
线 ， 称 为 本 初子 午 线 。 以 本 初子 午 线 为 起 点 ， 向 东 为 东经 度 (E) ， 向 西 为 西 经 度 (W) 。 
经 度 共 360”， 本 初子 午 线 为 0” 经 线 ， 东 西 经 度 各 为 180”， 东 、 西 经 180” 经 线 为 同一 条 经 
线 ， 统 称 180” 经 线 。 

纬度 以 赤道 为 起 点 ， 赤 道 以 北 为 北纬 度 (N) ， 赤 道 以 南 为 南 纬度 (S) 。 赤 道 是 0” 纬 
度 ， 北 纬度 的 最 大 值 是 90” ， 即 北极 点 ， 南 纬度 的 最 大 值 为 90” ， 即 南极 点 。 
下 面 通过 图 2.34 来 了 解 地 球 经 纬度 。 


3 


北极 


180 


图 2.34 地 球 经 纬度 


2.6.2 有 哪些 定位 数据 


HTML 5 通过 Geolocation 接 口 获取 用 户 地 理 位 置信 息 ， 开 发 者 不 需要 关心 接口 是 在 什么 设 
备 上 、 使 用 什么 底层 技术 去 实现 的 ， 只 要 会 简单 地 调用 即 可 。 

一 般 来 说 ， 浏 览 器 可 以 从 设备 中 获取 以 下 数据 来 源 : 

。 JP 地 址 。 

。 GPS (Global Positioning System， 即 全 球 定位 系统 ) 。 

。 RFID (Radio Frequency IDentification， 即 射频 识别 ) ， 如 汽车 防盗 和 无 钥匙 开门 系统 

的 应 用 、 门 禁 和 安全 管理 系统 。 
。 Wi-Fi 地 址 。 
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。 GSM 或 CDMA 手 机 的 ID。 
。 用 户 自 定义 的 地 理 位 置 数据 。 


每 种 获取 方式 由 于 原理 不 同 ， 所 以 在 精准 度 上 也 会 产生 差异 ， 比 如 使 用 笔记 本 连接 Wi-Fi 上 
网 获取 的 经 纬度 信息 与 使 用 手机 在 GSM 上 获取 的 经 纬度 信息 很 可 能 会 不 完全 一 致 。 下 面 通过 对 比 
各 项 技术 的 优 缺 点 让 读者 能 够 更 加 全 面 地 了 解 差异 ， 表 2.16 列 出 了 定位 数据 来 源 的 优 缺 点 。 
表 2.16 定位 数据 来 源 优 缺 点 
定位 数据 来 源 优点 缺点 


下 地 址 连接 上 网 的 地 方 都 可 获取 不 精确 
GPS 非常 精确 定位 时 间 长 、 耗 电大 、 室 内 效果 差 


精准 、 可 在 室内 


| RFID 《| 精准 、 

精准 、 可 在 室内 需要 有 无 线 接 入 点 

较 精准 、 可 在 室内 需要 有 手机 网 络 ， 且 基站 点 要 多 
自行 输入 位 置 更 准备 ， 定 位 快速 当 用 户 位 置 发 生变 化 时 不 准确 


通过 Geolocation HTML 5 除了 能 获取 到 经 纬度 坐标 外 ， 还 能 提供 位 置 坐标 的 精准 度 。 对 
于 某 些 较 高 级 的 硬件 设备 ， 浏 览 器 通过 Geolocation 还 能 获取 到 海拔 、 海 拔 精准 度 、 行 驶 方向 
和 速度 等 ， 开 发 者 可 以 通过 该 接口 获取 到 与 原生 应 用 同样 丰富 的 数据 形式 ， 开 发 出 更 多 酷 炉 
的 功能 ， 而 这 一 切 都 可 以 在 浏览 器 里 实现 。 


2.6.3 怎么 保护 自己 的 隐私 


地 理 位 置信 息 涉及 到 用 户 的 私 隐 ，HTML 5 Geolocation 设 计 之 初 就 考虑 到 了 这 一 点 ， 除 
非 用 户 明 确 允 许 ， 否 则 无 法 获取 位 置信 息 。 

当 用 户 访问 一 张 使 用 HTML 5 Geolocation 功 能 开发 的 页 面 时 ， 浏 览 器 会 出 现 用 户 授权 提 
示 条 ， 图 2.35 显 示 了 在 Chrome 浏 览 器 下 用 户 授权 条 的 样式 。 


DD leealhostJGeolocatien 上 x 
€ SC Dlocalhoct/Geolocation htn wD 


多 localhost 想 要 使 用 您 的 计算 机 的 所 在 位 置信 息 。 [天主 了 名 详情 


图 2.35 Chrome 浏 览 器 下 Geolocation 功 能 授权 提示 


不 同 的 浏览 器 ，Geolocation 用 户 授权 提示 信息 形式 也 不 同 ，Firefox 的 授权 提示 如 图 2.36 所 示 。 


Dtto: /vealhest/Geolseation Me 


人 6 BienwO TC|[ 攻 -P|] 易 会 交 


和 人 要 与 localleat 共享 的 位 加 法 卸 S? “ 
缆 了 全 


ew 


由 器 加 和 人 


图 2.36 Firefox 浏 览 器 下 Geolocation 功 能 授权 提示 
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HTML 5 Geolocation 方 法 在 使 用 时 除了 会 进行 用 户 授 权 ， 浏 览 器 还 允许 对 过 往 进行 授权 
的 网 站 进行 再 修改 ， 用 户 可 以 通过 修改 网 站 授权 达到 保护 自己 隐私 的 目的 ， 比 如 在 咖啡 厅 使 
带 有 Geolocation 的 应 用 查找 周边 的 商户 信息 ， 这 时 候 应 用 通过 经 纬度 信息 定位 周边 商户 ， 
可 以 方便 自己 寻找 信息 ， 但 当 环 境 发 生变 化 时 ， 如 回 到 自己 的 家 中 ， 此 时 可 以 重新 将 授权 私 
有 以 起 到 保护 作用 。 下 面 将 通过 图 示 来 学 习 如 何 将 授权 的 网 站 再 次 隐私 。 
以 Chrome 浏 览 器 为 例 ， 首 先 ， 单 击 浏览 器 导航 栏 右 侧 圆 形 类 似 定位 的 按钮 ， 如 图 2.37 所 示 。 
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DD locuhost/Geolocation 上 x 


D localhost /Geolocati @ DO@ 


经 度 ，121. 3387548 上 二 ER: 


纬度 ，31, 1608576 这 些 设 机 以 人 日 后 访问 
全 再 


图 2.37 单 击 Chrome 浏 览 器 导航 栏 右 侧 定位 按钮 


然后 ， 单 击 弹出 提示 框 的 “管理 位 置 设置 ”链接 ， 此 时 会 重新 打开 一 个 窗口 ， 链 接地 址 
为 “chrome://settings/contentExceptions#location”， 新 开 的 页 面 显 示 当 前 浏览 器 的 地 理 位 置信 
息 情 况 列表 ， 用 户 可 以 通过 编辑 列表 选择 是 否 再 次 对 网 站 进行 授权 ， 如 图 2.38 所 示 。 


地 理 位 置信 息 例 9M 钱 况 


主机 名 ( 可 包含 调配 符 ) 
httpi//localhost:a0 


图 2.38 Chrome 浏 览 器 Geolocation 授 权 编辑 列表 


2.6.4 构建 地 理 位 置 应 用 


在 上 一 小 节 的 示例 应 用 中 ， 已 经 通过 HTML 5 的 Geolocation 接 口 获取 到 当前 用 户 的 地 理 位 
置信 息 ， 下 面 将 结合 地 图 应 用 ， 在 地 图 上 显示 用 户 当前 的 地 理 位 置 并 进行 标注 ， 代 码 如 下 ; 


01 <!DOCTYPE html> 
02 <html> 
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03 <script language="javascript" src="http://webapi.amap.com/ 


maps?v=1.2"></script> // 高 德 地 图 脚本 
04 <body> 
05 <div id="imap" style="width:600px;height:200px;"></div> 
// 高 德 地 图 容器 
06 </body> 


07 <script> 
08 window.onload = function(){ 


// 页 面 资源 加 载 完 毕 后 执行 


09 navigator.geolocation.getCurrentPosition(function (Position ) { 

10 var lnglat = new AMap.LngLat (position.coords. 
longitude,position.coords.latitude); // 经 纬度 对 象 

11 var mapObj = new AMap.Map ("imap", { // 实例 化 地 图 对 象 

2 center:1lnglat, // 地 图 中 心 点 

3 level:13 // 地 图 缩放 登记 

14 D); 

15 Var marker = new AMap.Marker ({ // 实例 化 图 标 对 象 

16 map:mapObj, // 地 图 对 象 

T7 position:lnglat, // 基点 位 置 

18 icon:"http://webapi.amap.com/images/marker _ sprite. 
png"，// 图 标 ， 直 接 传递 地 址 图 片 地 址 

19 offset:{x:-8,y:-34} // 相对 于 基点 的 位 置 

20 Hi 

低潮 }, function(error){ 

2 debugger; 

23 }，{ 

24 enableHighAccuracy : false, 

2 maximumAge : 10, 

26 timeout : 8000 

27 1); 

28 } 

29 </script> 

30 </html> 

示例 效果 如 图 2.39 所 示 。 


DD leeslhest/Geelecatien } x 


© Dlocalhost/Geolocation. htm 


图 2.39 通过 Geolocation 接 口 获取 经 纬度 并 显示 在 地 图 上 


浏览 器 的 Geolocation 对 象 有 三 个 方法 ， 分 析 如 下 。 
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getCurrentPosition: 获取 用 户 当前 的 位 置信 息 ， 只 能 获取 一 次 。 

watchPosition: 循环 检测 用 户 的 地 理 位 置 ， 只 要 发 生变 化 ， 浏 览 器 就 会 触发 
watchPosition 函 数 。 

clearWatch: 清除 一 个 用 于 对 用 户 位 置 的 循环 监视 。 


getCurrentPosition 和 watchPosition 的 用 法 类 似 ， 语 法 如 下 : 


navigator.geolocation.getCurrentPosition(geolocationSsuccess, 


geolocationError, geolocationOptions); 


geolocationSuccess 当 获取 经 纬度 信息 成 功 时 触发 ， 回 调 函 数 接收 一 个 带 有 用 户 信息 的 对 
象 字 面 量 ， 包 含 两 个 属性 coords 和 timestamp， 其 中 coords 属 性 对 象 包含 以 下 7 个 属性 值 。 


传 


回 


accuracy: 精确 度 。 

latitude: 纬度 。 

longitude: 经 度 。 

altitude: 海拔 ， 海 平面 以 上 以 米 计 。 
altitudeAcuracy: 海拔 的 精确 度 。 
heading: 朝向 ， 从 正 北 开始 以 度 计 。 
speed: 速度 ， 以 米 /每 秒 计 。 


geolocationError 为 错误 回调 函数 ， 当 无 法 获取 用 户 经 纬度 时 ， 浏 览 器 会 触发 该 函数 ， 并 
错误 对 象 ， 具 体 可 能 出 现 的 错误 情况 可 以 参考 文档 http://dev.w3.org/geo/api/spec-source. 
html#permission denied error。 


geolocationOptions 参 数 为 自 定义 的 对 象 字面 量 ， 拥 有 三 个 自 定义 属性 ， 分 析 如 下 。 


enableHighAccuracy: 返回 更 加 精确 的 用 户 信息 数据 ， 默 认为 false， 关 闭 ， 如 果 设置 为 
true， 浏 览 器 将 消耗 更 多 的 时 间 用 于 获取 信息 ， 在 移动 设备 上 使 用 会 消耗 更 多 的 电量 。 
timeout: 浏览 器 获取 用 户 位 置信 息 的 超时 时 间 ， 默 认为 0。 

maximumAge: 浏览 器 获取 用 户 位 置信 息 后 的 缓存 时 间 ， 单 位 为 毫秒 ， 默 认为 0， 表 
示 每 次 都 重新 获取 。 


拖 放 功能 在 HTML 5 没有 出 现 之 前 ， 可 以 通过 元 素 的 mousedown、mousemove、mouseup 


事件 来 实现 ， 但 仅 针 对 于 页 面 上 的 DOM 元 素 。HTML 5 的 出 现 使 得 拖 放 变 得 更 加 广义 ， 不 仅 


另外 提供 了 一 套 规范 的 事件 格式 ， 而 且 还 支持 桌面 文件 到 浏览 器 的 拖 放 ， 不 需要 依赖 于 第 三 
方 的 插件 ， 如 最 常用 的 Flash， 大 大 简化 了 拖 放 的 代码 ， 提 高 了 网 页 拖 放 的 用 户 体验 ， 同 时 也 
为 移动 设备 拖 放 提 供 了 一 个 可 信赖 的 解决 方案 。 

看 到 这 里 ， 读 者 一 定 对 相关 的 拖 放 事 件 非常 好 奇 ， 表 2.17 列 出 了 跟 拖 放 相 关 的 事件 。 
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@、 |HTML 5 网 页 开发 实例 详 角 


表 2.17 拖 放 相关 的 事件 


dragstart 开始 拖 放 

drag 拖 放 过 程 中 

dragenter 被 拖 放 元 票 进入 本 元 票 范围 内 
dragleave 被 拖 放 元 票 离开 本 元 票 范 围 
dragend 拖 放 结束 

dragover 被 拖 放 元 票 在 本 元 村 上 移动 
drop 放置 拖 放 内 容 


开发 者 只 要 简单 的 通过 上 述 事件 ， 在 不 同 的 事件 周期 内 执行 指定 业务 逻辑 ， 就 可 以 轻松 
实现 Web 2.0 时 代 流 行 的 拖 放 功 能 。 


2.7.1 Datatransfer 对 象 


Datatransfer 对 象 是 HTML 5 新 增 的 数据 对 象 ， 主 要 用 于 控制 拖 放 操作 中 的 数据 ， 提 供 了 
预定 义 的 剪贴 板 格 式 数 据 访问 功能 ， 如 可 在 dragstart 事 件 触 发 时 进行 数据 设置 ， 之 后 在 drop 事 
件 时 对 数据 进行 读 取 和 修改 。Datatransfer 对 象 目前 拥有 如 下 4 个 属性 。 


。 dropEffect: 设置 或 获取 拖 慢 操作 的 类 型 和 要 显示 的 光标 类 型 ， 如 类 型 none、copy、 
link 和 move。 

。 effectAllowed: 设置 或 获取 数据 传送 操作 可 应 用 于 该 对 象 的 拖 放 效 果 ， 如 效果 none、 
copy、 copyLink、 copyMove、 link、 linkMove、move、all 和 uninitialized。 

。 files: 拖 放 时 的 文件 列表 。 

。 types: 返回 在 dragstart 事 件 触发 时 为 元 素 存储 数据 格式 类 型 ， 如 果 是 外 部 文件 的 拖 放 
则 返回 flles 字 符 囊 。 


另外 ，Datatransfer 对 象 还 拥有 5 种 常用 方法 ， 说 明 如 下 。 


。 addElement: 添加 一 同 跟随 拖 旭 的 元 素 。 
。 clearData: 删除 指定 格式 数据 ， 如 未 指 设 定 ， 则 删除 当前 元 素 下 所 有 携带 数据 。 
。 getData: 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返回 空 字符 串 。 


setData: 给 元 素 添加 指定 数据 。 
setDragImage: 指定 拖 旬 元 素 时 ， 跟 随 鼠 标 移动 的 图 片 ，x、y 分 别 为 相对 于 饼 标的 偏 
移 量 。 


Datatransfer 对 象 一 般 在 dragstart 事 件 触 发 时 使 用 ， 关 键 方法 setData 一 般 采用 两 种 数据 格 
式 ， 用 于 文本 数据 存储 的 “text/plain” 和 用 于 URL 信 息 存储 的 “text/uri-list”。 


2.7.2 拖 放 的 事件 监听 


拖 放 行为 的 所 有 监听 事件 如 表 2.18 所 示 ，HIML 5 中 要 让 元 素 具备 拖 放 功 能 ， 首 先 需 要 打 
元 素 draggable 属 性 ， 设 置 为 tue， 表 示 开 启 元 素 拖 放 功 能 ， 被 设置 的 元 素 可 以 是 网 页 上 任 
意 的 图 片 、 链 接 、 文 件 或 其 他 DOM 节 点 。 下 面 通过 一 个 示例 了 解 部 分 拖 放 事 件 的 实际 使 用 情 
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况 ， 代 码 如 下 : 


01 
02 
03 


04 
05 


06 
07 
08 
09 
10 
本 


12 


让 
14 


16 
到 尖 


18 
汪汪 
20 
Pb 


<!DOCTYPE html> 
<html> 
<style type="text/css">div{width:100px; height: 100px; background- 
color: blue;margin :5px;}</style> 
<body> 

<div id="drag-target"” data-content=" 我 是 数据 " draggable="true"> 搜 
我 ! </div> ”<!-- 可 拖 放 元 素 --> 


<div id="drat-dest"></div> <!-- 放 置 目标 元 素 --> 
</body> 
<script type="text/javascript"> 


var drag target = document.getElementById('drag-target'), 
// 可 拖 放 元 素 
drat dest = document.getElementById('drat-dest'); 
// 可 拖 放 元 素 
drag target.addEventListener('dragstart', function(e) { 
// 监听 开始 拖 电 事件 
e.dataTransfer.setData('text/plain', e.target.getAttribute('data- 
content')); // 使 用 文本 存 入 属性 值 
},false); 
drat dest .addEventListener('drop', function(e) { 
// 监听 放置 事件 
drat_ dest.innerHTML = e.dataTransfer.getData('text/plain’'); 
// 设置 html 为 获取 数据 
},false); 
drat_ dest .addEventListener('dragover', function(e) { 
// 监听 拖 遇 移动 事件 
e.preventDefault () // 阻止 元 素 默 认 事件 
},false) 
</script> 
</html> 


将 文件 保存 为 html 格 式 ， 并 使 用 Chrome 浏 览 器 打开 ， 效 果 如 图 2.40 所 示 。 单 击 第 一 区 域 
方块 ， 并 拖 放 至 第 二 区 域 ， 然 后 松 开 鼠 标 ， 此 时 第 二 区 域 出 现 “ 我 是 数据 ”文字 ， 表 示 数 据 
已 经 转移 完毕 ， 效 果 如 图 2.41 所 示 。 


SUCGUD Sale 安 | 使 


0 Dro 


图 2.40 拖 折 示例 页 面 效果 图 2.41 拖 放 数据 内 容 
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整个 示例 中 主要 运用 三 种 事件 : dragstart、dragover、drop。dragstart 事 件 监听 拖 放 开 始 ， 
示例 中 在 拖 放 开始 时 ， 将 第 一 区 方块 元 素 的 数据 使 用 DataTransfer 对 象 的 setData 进 行 保存 。 
dragover 事 件 用 于 监听 第 二 区 方块 ， 并 调用 事件 对 象 的 preventDefault 方 法 ， 阻 止 浏览 器 元 素 
软 认 事件 ， 这 个 过 程 是 必须 的 ， 否 则 无 法 触发 drop 事 件 。 最 后 是 监听 drop 事 件 ， 用 于 监听 放 
置 内 容 的 结束 过 程 ， 此 时 ， 从 之 前 存 入 DataTransfer 对 象 中 获取 数据 并 填充 至 第 二 方块 区 ， 示 
例 代码 非常 简单 ， 但 完成 了 一 个 了 不 起 的 功能 。 


2.7.3 带 拖 放 功能 的 网 站 


HTML 5 拖 昂 功 能 的 强大 最 先 体 现在 上 传 功能 的 应 用 上 ， 很 多 网 站 将 其 用 于 图 片上 传 。 
大 家 所 熟悉 的 新 浪 微 博 也 与 时 俱 进 的 提供 了 带 有 drag 和 drop 功 能 的 图 片上 传 模块 。 
使 用 Chrome 浏 览 器 打开 新 浪 微 博 ， 图 片上 传 功能 出 现在 发 送 微 博 区 域 ， 如 图 2.42 所 示 。 


内 


个 来 情 加 图片 四 视频 四 话题 加 长 济 本 | 更 乡 - 公开 ~ 


图 2.42 新 浪 微 博 图 片上 传 功能 


HTML 5 的 drop 功 能 并 非 通过 图 2.42 箭 头 所 示 的 操作 触发 ， 而 且 出 现在 微 博 内容 输 入 区 
域 ， 实 现 了 用 户 可 直接 将 计算 机 本 地 的 图 片 文 件 拖 放 至 该 区 域 并 将 图 片上 传 。 首 先 ， 在 计算 
机 本 地 用 鼠标 选中 一 张 图 片 ， 将 图 片 拖 放 至 微 博 输入 文本 框 区 域 ， 当 正在 拖 皂 图 片 的 鼠标 出 
现在 文本 输入 区 域 时 ， 网 页 提示 用 户 上 传 准备 就 绪 ， 效 果 如 图 2.43 所 示 。 

[ L 


局 十 掩 动 图 片 到 这 里 上 传 


固 来 情 加 图片 加 视频 回话 看 团 长 向 博 | 更 ~ 公开 ~ 


图 2.43 拖 描 本 地 图 片 至 微 博文 本 输入 区 域 


松 开 拖 蝶 图 片 的 鼠标 ， 图 片 文件 被 应 用 读 取 并 上 传 至 服务 器 ， 同 时 文本 框 下 方 出 现 图 片 
缩 略 图 ， 效 果 如 图 2.44 所 示 。 


固 未 情 回 图片 加 视频 四 话题 加 长 山本 | 更 ~ 公开 ~ 


本 地 上 伟 
日 时 间 排序 ~ 


共 1 张 , 还 能 上 传 93k ( 按 住 ctr/ 同 过 各 张 
2 
总 


图 2.44 松 开 鼠 标 完成 图 片上 传 
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微 博 应 用 的 图 片上 传 除 了 运用 上 一 示例 中 出 现 的 dragstart、dragover、drop 外 ， 还 运用 了 
dragenter、dragleave 事 件 。 以 实现 文件 移入 文本 输入 区 域 的 信息 提示 和 隐藏 。 

HTML 5 的 拖 放 功 能 除了 出 现在 一 些 社交 网 站 外 ， 还 出 现在 一 些 提供 在 线 云 存储 的 应 
用 ， 如 人 金山 快 盘 等 ， 为 一 些 高 级 浏览 器 用 户 提供 了 更 加 优秀 的 用 户 体验 。 心 动 不 如 行动 ， 赶 
快 为 自己 的 网 站 添加 HTML 5 拖 放 功 能 吧 。 


2.7.4 构建 网 页 的 拖 放 应 用 


体验 了 HTML 5 拖 放 功 能 给 网 站 应 用 带 来 的 优秀 用 户 体验 ， 本 节 用 制作 示例 来 模拟 微 博 
图 片 拖 放 功 能 。 打 开光 盘 中 的 第 2 章 示 例 Drop.htm， 效 果 如 图 2.45 所 示 。 


固 表 傅 回 图 片 四 视频 团 话 是 回 长 讽 博 | 更 多 ^ 


[a 
忆 
» 


图 2.45 拖 放 示例 


示例 使 用 效果 与 微 博 相同 ， 下 面 通过 代码 分 析 拖 放 功 能 的 具体 实现 ， 示 例 代码 如 下 : 


01 
02 
03 


<!DOCTYPE html> 

<html> 

<head><link rel="stylesheet" type="text/css" href="../css/weibo.css"> 
</head> 

<body> /* 省 略 html 结 构 代 码 ， 参 看 本 书 网 络 资源 */</body> 


<script type="text/javascript"> 


Var textarea = document .querySelector('textarea'); // 微 博 文本 输入 框 元 素 
var W_layer = document .querySelector('div.W_layer'); // 图 片上 传 提示 层 元 素 
var W_close = document .querySelector('a.W_close'); // 提示 层 关闭 按钮 元 素 
var W_add = W layer.querySelector ('li.add'); // 追加 图 片 元 素 

var W list = W add.parentNode; // 图 片 列表 容器 元 素 
Var p_count =document .querySelector('i.J count'); // 图 片 数 量 元 素 
function render one (file){ // 单个 图 片 元 素 泻 染 


Var reader; 
// reader 变 量 存放 FileReader 实 例 
if (file.type.toLowerCase() .match (/image.*/)) { 
// 正则 判断 文件 是 否 为 图 片 类 型 
reader = new FileReader(); 
// 实例 化 FileReader 对 象 ， 用 于 读 取 文件 数据 
reader.addEventListener('load', function (e) { 


// 监听 FileReader 实 例 的 Load 事 件 


Var li = document.createElement ('1i'); 
// 创建 上 传 图 片 容 器 
li.className = 'pic'; 
1i.innerHTML ='<img src="' + e.target.result + '">'; 
W list.insertBefore(li , W add); // 插入 图 片 


P_count .innerHTML = (p_count.innerHTML>>0) + 1; 


CIHTML sans ee 


// 更 新 图 片 数 
22 1D); 
23 reader .readAsDataURL (file); // 读 取 文 件 为 DataURL 
24 }37 
25 


26 document.addEventListener('dragenter', function(e) { 
// 监听 拖 放 文 件 进入 元 素 
wp) textarea.classList.add('textarea-enter'); 
28 J},false); 
29 document .addEventListener('dragover', function(e) { 
// 监听 拖 放 文件 在 元 素 上 移动 
30 e.preventDefault (); // 阻止 默认 事件 ， 确 保 drop 事 件 触发 
31 J},false); 
32 document.addEventListener('dragleave', functionl(e) { 


// 监听 拖 放 文件 离开 元 素 


33 textarea.classList.remove('textarea-enter'); 

34 J},false); 

35 document.addEventListener('drop', function(e) { // 监听 文件 放置 
36 e.preventDefault (); 

注册 W layer.style.display = 'block'; 

38 textarea.classList.remove('textarea-enter'); 

39 var files = e.dataTransfer .files; // 获取 文件 列表 
40 for(var i =0,1 = files.length; i<]l; i++){ 

41 render one (files[i]); // 页 面 构建 每 张 上 传 图 片 
42 js 


43 },false); 

44 W close.addEventListener('click', function(e) { 
// 监听 浮 层 单 击 事件 ， 执 行 关闭 操作 

45 e.preventDefault () 7 

46 W_ layer.style.display = 'none'; 

47 },false); 

48 </script> 


49 </html> 
本 示例 主要 实现 的 是 监听 HTML 5 拖 放 事 件 ， 在 不 同 的 事件 周期 内 执行 对 应 操作 ， 拖 放 


相关 涉及 的 事件 有 dragenter、dragover、dragleave、drop。 

dragenter 事 件 在 每 次 文件 被 拖 放 进 入 元 素 范 围 内 触发 ， 示 例 中 当 文件 被 拖 放 入 页 面 ， 
则 给 文本 框 元 素 添 加 textarea-enter 样 式 ， 提 示 用 户 支持 将 文件 直接 拖 放 上 传 到 区 域 ， 如 图 
2.43 所 示 。 

dragover 事 件 当 被 拖 放 元 素 在 本 元 素 上 移动 时 触发 ， 要 实现 drop 拖 放 功能 ， 监 听 该 事件 在 
触发 时 阻止 元 素 默 认 事件 是 必 不 可 少 的 ， 否 则 无 法 在 元 素 放置 时 触发 drop 事 件 。 

dragleave 事 件 在 每 次 文件 被 拖 放 离 开元 素 范围 时 触发 ， 本 例 将 该 事件 监听 添加 在 
document 上 ， 即 表示 当 文 件 离开 网 页 时 触发 ， 触 发 后 移 除 原 本 被 添加 在 文本 框 元 素 上 的 
textarea-enter 样 式 ， 表 示 此 时 放置 元 素 将 无 法 实现 拖 放 功能 ， 需 再 次 拖 放 入 网 页 。 

drop 事 件 是 实现 文件 最 终 上 传 的 关键 ， 事 件 在 文件 被 放置 后 触发 ， 示 例 中 当 文 件 被 放 
置 于 页 面 后 触发 drop 事 件 ， 将 从 事件 对 象 的 dataTransfer 属 性 中 获取 文件 列表 ， 并 循环 文件 列 
表 ， 演 染 图 片 弹出 上 传 提 示 信 息 框 。 
图 片 的 泻 染 用 到 了 自 定义 方法 render_ one， 该 方法 接收 一 个 File 对 象 作为 参数 。 首 先 通 
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过 文件 的 type 属 性 判断 文件 类 型 ， 当 判断 为 图 片 文件 时 ， 表 示 该 文件 属于 应 用 上 传 图 片 的 范 
围 ， 此 时 新 建 FileReader 实 例 读 取 图 片 文件 内 容 ， 并 将 返回 的 base64 内 容 赋 耶 图 片 ， 插 入 弹出 
的 浮 提示 信息 框 。 


但、 本 示例 只 完成 了 网 页 前 端 效果 部 分 ， 不 涉及 后 端 图 片 保存 功能 ， 读 者 可 在 抢 放 章节 的 示例 中 
[国学 习 如 何 使 用 Nodejs 编 写 图 片上 传 接收 服务 。 


2.8 Web 存储 


传统 的 客户 端 存储 一 直 以 来 都 是 使 用 Cookies 实 现 的， 但 限于 Cookies 自 身 的 局 限 性 ， 它 
并 不 适合 存储 大 量 数据 。 因 为 浏览 器 每 次 发 送 请 求 都 会 将 Cookies 信 息 发 送 至 服务 器 端 ， 这 使 
得 访问 速度 下 降 且 不 够 高 效 ， 同 时 不 同 的 浏览 器 对 Cookie 有 不 同 的 限制 ， 如 早期 的 IE 6 浏览 
器 对 Cookies 限 制 大 小 为 SKB， 同 一 域名 下 只 人 允许 存在 20 个 Cookies， 后 续 新 增 的 Cookies 数 据 
会 将 先前 的 踢 出 ， 这 将 会 导致 很 多 意 想不到 的 问题 ， 所 以 使 用 Cookies 一 定 要 满足 后 台数 据 服 
务 ， 同 时 要 在 知晓 的 情况 下 才 可 使 用 ， 切 记 滥 用 Cookies。 

现今 的 Web 应 用 需要 更 加 强大 的 数据 存储 方式 来 替代 早期 的 Cookies， 在 HTML 5 出 现 之 
前 已 经 有 很 多 相关 的 技术 解决 方案 ， 如 正 的 User Data、Flash 的 Cookie、 谷 歌 的 Gears 技 术 等 ， 
每 种 技术 都 有 自己 的 特点 和 局 限 ， 同 时 需要 不 同 插件 的 支持 ， 使 得 开发 人 员 需 要 消耗 大 量 的 
成 本 完成 Cookies 的 替代 方案 ， 维 护 成 本 攀升 。 

HTML 5 的 出 现 ， 提 供 了 全 新 的 统一 标准 的 Web 存 储 解决 方案 ， 并 且 目 前 已 经 得 到 了 1/ 
泛 的 支持 ， 如 IE 8+、Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10.S+， 手 机 平台 包括 iPhone 
2+ 和 Android 2+， 都 已 经 实现 了 并 支持 HTML 5 的 Web Storage。 


W3C 提 供 了 Web Storage 标 准 的 说 明文 案 ， 如 果 读 者 英文 不 错 ， 可 以 先前 往 地 址 http://dev. 


全 示 
| | w3.org/html5/webstorage/ 查 阅 。 


2.8.1 设置 和 获取 数据 


HTML 5 的 Web 存 储 提供 了 一 套 键 值 对 的 存储 模型 ， 同 时 对 于 不 同 网 站 ， 数 据 被 存储 于 不 
同 区 域 ， 并 且 一 个 域名 只 能 访问 自身 的 存储 数据 ， 在 安全 上 做 到 了 与 Cookies 同 样 的 效果 。 存 
储 大 小 也 进行 了 调整 ， 现 在 开发 者 可 以 使 用 HTML 5 的 Web 存 储 至 少 5MB 的 数据 ， 对 于 一 般 的 
应 用 来 说 已 经 绰绰有余 。 

HIML 5 的 Web 存 储 一 共 提供 了 5 种 方法 ， 说 明 如 下 。 


。 setItem(key,value): 添加 存储 键 值 对 ， 存 储 数据 为 字符 类 型 。 
。 getItem(key) : 根据 key 值 获取 对 应 的 值 。 
。 clear0: 清空 Web 存 储 中 所 有 数据 。 
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。 removeltem(key) : 从 Web 存 储 移 除 某 个 指定 键 值 对 应 的 数据 。 
。 key(n) : 获取 第 n 个 键 值 。 
下 面 以 LocalStorage 功 能 介绍 具体 的 方法 使 用 ， 代 码 如 下 : 


localStorage.setItem('1','test'); 
console.log(localSsStorage.getItem('1')) // 打印 出 数据 'test' 


读者 可 以 使 用 Chrome 浏 览 器 打开 开发 者 工具 查看 被 存储 的 数据 ， 效 果 如 图 2.46 所 示 。 


Elements |Resourees| Network Sources Timeline Profiles Audits » x 


* 丫 Fames Key Value 
THweb SQL 
Endeedpe 

" 国 Local songe 


* 国 Session orsge 
* 古 cookuiez 


" 国 Application Cache 
[= NE- x 交 


图 2.46 使 用 Chrome 浏 览 器 查看 localStorage 数 据 


Web 存 储 中 的 key 方 法 ， 用 于 获取 当前 域名 下 对 应 索引 序号 的 键 值 ， 游 标 默认 从 0 开始 ， 
如 果 要 获取 之 前 存储 的 数据 键 值 ， 代 码 如 下 : 


localStorage.key (0); // ”输出 为 '1' 

想 要 删除 一 个 或 者 多 个 Web 存 储 数据 可 以 使 用 removeItem 或 clear 方 法 ， 代 码 如 下 : 
localStorage。IemoveItem ('1°'); // 删除 键 值 '1' 对 应 的 缓存 数据 
localstorage.clear (); // 删除 当前 域名 下 所 有 缓存 数据 


2.8.2 LocalStorage 与 SessionStorage 


HTML 5 的 Web 存 储 提供 了 两 种 客户 端 数据 存储 方式 ， 分 别 为 LocalStorage 和 
SessionStorage。LocalStorage 主 要 用 于 持久 化 的 本 地 存储 ， 除 非 主动 删除 数据 ， 否 则 数据 永远 
不 会 过 期 。SessionStorage 用 于 本 地 存储 一 个 会 话 中 的 数据 ， 这 些 数据 在 该 会 话 结束 时 一 同 销 
毁 ， 如 浏览 器 关闭 ， 所 以 SessionStorage 不 是 一 种 持久 化 的 本 地 数据 。 

SessionStorage 功 能 在 浏览 器 进程 的 内 存 中 实现 ， 浏 览 器 关闭 后 自动 销毁 。LocalStorage 
功能 是 一 种 持久 化 的 存储 ， 数 据 被 存储 后 实际 被 放置 于 用 户 计算 机 上 ， 不 同 的 浏览 器 实现 的 
LocalStorage 存 放 的 格式 和 位 置 也 不 相同 ， 表 2.18 例 举 了 目前 主流 浏览 器 LocalStorage 数 据 存放 
形式 ， 以 Windows 系 统 为 例 。 


表 2.18 主流 浏览 器 LocalStorage 数 据 存放 形式 


浏览 器 格式 加 密 方式 


Pitefox” |-SQLite 明文 C :\Users\user\AppData\Roaming\Mozilla\Firefox\Profiles\tyraqe3t.default\ 
webappsstore.sqlite 

Chrome | SQLite | 明文 Ci:\Users\user\AppData\Local\Google\Chrome\User Data\Default\Local Storage\ 

下 XML | 明文 C:\Users\user\AppData\Local\MicrosoftIE\DOMStore\ 

Safari SQLite | 明文 Ci:\Users\user\AppData\Local\Apple Computer\Safari\LocalStorage 

Opera XML | base64 C:\Users\user\AppData\Roaming\Opera\Opera\pstorage\ 
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SQLite 是 一 款 轻型 的 数据 库 ， 遵 守 ACID 的 关联 式 数 据 库 管理 系统 ， 主 要 被 用 于 谈 入 式 产品 ， 
Ls 而 且 目前 已 经 在 很 多 谈 入 式 产 品 中 使 用 ， 占 用 资源 非常 的 低 ， 在 嵌入 式 设 备 中 ， 可 能 只 需要 
几 百 多 的 内 存 就 够 了 。 


下 面 将 以 Windows 系 统 下 Chrome 浏 览 器 为 例 ， 找 寻 用 户 本 地 的 LocalStorage 存 储 信 息 。 
首先 在 浏览 器 内 打开 一 个 网 站 (如 http://www.dianping.com) ， 在 控制 台 输 入 测试 存储 的 
LocalStorage 人 信息， 代码 如 下 : 


localStorage.setIitem('1','test'); 


代码 执行 效果 如 图 2.47 所 示 。 


CD wm dianping com 


您 好 , zhou_yao 二 星 (129) | 消息 个 人 中 心 加 


大 摊点 侠 8 


Elements Resources Network Sources Timeline Profiles Audits icComsolel 


» localstorage.setIten('1’, ‘test*); 


口 , 注 A © ‘pfame>v 如 ED | Emor Waming Log; Debu 大 


图 2.47 储存 测试 LocalStorage 信 息 


下 载 SQLite 用 于 打开 Chrome 浏 览 器 本 地 LocalStorage 存 储 ， 地 址 为 http://www.sqlite.org/ 
download.html， 下 载 链接 如 图 2.48 所 示 。 


思 Solite Domlowd Pa x 
€ 3 © Dwm.sqlite.org/domlosd htnl Oo= 
Precompiled Binaries for Windows 


sqlite-shell-win32- A commond-line shell for accessing and 
X86-3030002.zin 。 modifying SQLite databases This program is 


(276.71 KIB) compatible with all versions of SQLite through 
pa 3.8. 0 2 and beyond， 


(Sh: 
扫 7gc197303070b3cb03fo28d92dadebc565ef) 


Salite-dll-win32- ee ZIP archive contains 5 DLL for the SQLite 
2 zh ary version 3.8.0.2 for 32-bit x86 processors 
G11.22 KiB) < 党 the Win32 AT The DIL is bullt using 
ENABLE COL UM METADATA SO tot It 
要 See for use with Ruby on Rails, 


P1941 0ab5593d3659c049f76907d7316c7e607) 司 


图 2.48 下 载 SQLite 


打开 本 地 目录 “C:\Users\{user}\AppData\Local\Google\Chrome\User Data\Default\Local 
Storage”， 其 中 “ {user}” 按 照 读 者 本 地 用 户 而 定 ， 查 找 与 “www.dianping.com” 相 关 的 文 
件 ， 笔 者 计算 机 本 地 文件 名 为 “http_www.dianping.com_0.localstorage”， 使 用 SQLite 打 开 ， 
如 图 2.49 所 示 。 
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从 


TC \indors\systen32\cad exe — sqlite3. exe “C: Wsers\yao ben 


到 2.49 使 用 SQLite 打 开本 地 LocalStorage 存 储 文件 


P 可 以 找到 之 前 存 入 的 数据 ， 读 者 可 以 参照 表 2.18 查 找 其 他 浏览 器 本 地 的 LocalStorage 
信息 ， 马 上 动手 吧 。 


2.8.3 网 站 本 地 存储 兼容 性 方案 


HTML 5 的 LocalStorage 功 能 


由 


前 只 能 在 高 级 的 浏 


览 器 上 使 用 ， 如 果 要 将 LocalStorage 


网 站 上 ， 需 要 考虑 到 历史 浏览 器 的 兼容 问题 ， 前 面 已 
上 的 瓶颈 和 局 限 ， 下 面 将 介绍 笔者 编写 的 LocalStora 


题 ， 


在 


经 介绍 使 用 Cookies 在 网 络 传输 和 浏览 号 


ge 类 库 ， 用 于 解决 不 同 浏览 器 的 兼容 


代码 如 下 : 

01 (function (WIN) { 

02 var NOOP = function () { }, 

03 DOC = document, 

04 DB_NAME = 'html5 storage', // Web SQL 数据 库 名 
05 DB_DISPLAYNAME = "htm15 storage data', // Web SQL 数据 表 名 
06 DB_MAXSIZE = 1048576, // web SoL 数 据 库 大 小 
07 DB_VERSION = '1.0', // Web SQL 数据 版 本 
08 USERDATA PATH = "htm15 storage'v // UserData 路 径 

09 USERDATA NAME = "data'v // UserData 存 储 键 值 
10 MODE NOOP = 0, // 无 法 匹配 状态 

1 MODE HTML5 = 1, // HTML 5 状态 

12 MODE_GECKO = 2， // 部 分 Firefox 状 态 
13 MODE DB = 3, // 部 分 Safari 状态 
14 MODE USERDATA = 4; // 部 分 IE 状态 

15 var data = {}, // 缓存 数据 

16 readys = [], // 启动 方法 队列 

ly storageDriver, // 当前 浏览 器 缓存 

18 storageMode; 

19 function mix(r, s) { // 对 象 合并 方法 

20 Var key; 

2 for (key in 3 { elkey] = -3s[keyle 3 

sr return r; 

23 过 

24 Ery // 浏览 器 判断 

25 if (WIN.localstorage) { // 支持 Localstorage 
26 storageMode = MODE HTMLS5; 

A } else if (WIN-globalStorage) {// Firefox 2 and Firefox 3.0 


问 
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2 


30 
Eh 
3 
EE) 
34 
35 
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48 
49 
50 
51 
52 
53 
54 


55 
56 
57 
58 
59 
60 
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62 
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67 
68 


69 
70 
3 
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73 
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storageMode = MODE GECKO; 
} else if (WIN.openDatabase && navigator.userAgent. 
indexof ('Chrome') === -1) { 
storageMode = MODE DB; 77 Safari 3.1 and Safari 3.2 
} else if (D.UA.ie >= 5) { // IE 5 IE 6 and IE 7 
storageMode = MODE USERDATA; 
} else { 
storageMode = MODE NOOP; 
}s; 
} catch (ex) { 
storageMode = MODE NOOP; 
Tn 
Var Storage = { // 类 库 接口 
clear: NooP, // 清空 所 有 存储 数据 
length: function () { return 0; }， // 获取 缓存 数量 
getItem: NOOP, // 根据 键 值 获取 数据 
removeItem: NOOP, // 移 除 单个 键 值 对 
setItem: NOOP, // 存储 键 值 对 
ready: function (fn) { // 类 库 模块 准备 完毕 
if (Storage.isReady) { fn();} 
else { readys.push(fn); }; 
}, 
isReady: false // 类 库 模 块 是 否 准 备 完毕 
I 
function doReady() { // IE 5、IE 6 and IE 7 模块 完毕 
DOC .body.appendChild(storageDriver); 
storageDriver.1load (USERDATA PATH); 
try { data = JSON.parse(storageDriver.getAttribute (USERDATA_ 
NAME) || '{}'); 
} catch (ex) { data = {}; }; 
Storage.isReady = true; 
}; // 可 以 使 用 原生 的 Localstorage 方 法 
if (storageMode === MODE HTML5 || storageMode === MODE GECKO) { 
_mix(Storage, { 
length: function () { return storageDriver.length; }, 
removeItem: function (key) { 
storageDriver.removeItem(key); 
}, 
setItem: function (key, value, json) { 
if (value === undefined || value === null) { 
Storage.removeItem (key); 
} else { 
storageDriver.setItem(key, json ? 


JSON.stringify(value) : value); 


] 7 


Ds; 
if (storageMode === MODE HTML5) { 


// 可 以 使 用 原生 的 Localstorage 方 法 


storageDriver 


WIN.localStorage; 
_mix(Storage, { 
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95 
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二 7 
98 
99 
100 
101 
102 
103 


clear: function () { storageDriver.clear(); }, 
getItem: function (key, json) { 
EE 
return json ? JSON.parse (storageDriver. 
getItem(key)) : 
storageDriver.getItem(key); 
} catch (ex) { return null; }; 


Ps 
} else if (storageMode =—= MODE GECKO) { 
// Safari 3.1 and 3.2 
storageDriver = WIN-globalStorage [WIN.1location.hostname]; 
// 使 用 globalstorage 方 法 
_mix(Storage, { 
clear: function () { 
for (var key in storageDriver) { 
if (storageDriver.hasOwnProperty(key)) { 
// 判断 是 否 为 非 原 型 对 象 属性 
storageDriver.removeItem (key); 
delete storageDriver[key]; 


// 删除 对 应 属性 


}, 
getItem: function (key, json) { 
// 获取 单条 数据 ， 支 持 JSON 
| 
return json ? JSON.parse(storageDriver[key]. 
value) : 
storageDriver[key] .value; 
} catch (ex) { return null; }; 


Ds 
] 7 
Storage.isReady = true; // IE 5、IE 6 and IE 7 下 使 用 UserData 
} else if (storageMode === MODE DB || storageMode === 


MODE USERDATA) { 
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_mix(Storage, { 
clear: function () { 
data = {}; 
Storage._save () 7 // 调用 私有 方法 存储 
]}v 
getItem: function (key, json) { 
return data.hasOwnProperty(key) ? data[key] : null; 
]， 
length: function () { // 循环 属性 获取 长 度 
Var count = 0，key7 
for (key in data) { 
if (data-hasOwnProperty(key)) { count += 1; } 
}; 


return count; 
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118 ]， 
1L9 TemoVeItem: function (key) { 
120 delete data[key]7 
2 Storage. save(); 
122 ]， 
2 setItem: function (key, value, json) { 
// 存 入 当 条 数据 ， 支 持 JSON 
124 if (value === undefined || value === null) { 
125 Storage.removeItem (key); 
126 } else { 
127 data[lkey] = value.toString(); 
// 转 为 字符 型 存储 
128 Storage. save(); 
2 人 0 }; 
130 
3 1D; 
Be if (storageMode === MODE DBE) { J 使 用 openDatabase 方 法 
3 storageDriver = WIN.openDatabase (DB NAME, DB VERSION, DB_ 
134 DISPLAYNAME, DB MAXSIZE); 
135 _mix(Storage, { 
136 _save: function () { 
二 3 storageDriver.transaction(function (t) { 
// 新 建 事务 创建 数据 库 
138 t.executeSql ("REPLACE INTO " + DB NAME + 


" (name, value) VALUES ('data’', ?2)", 
139 [JSON.stringify(data)]); 


140 ]) 
141 } 
142 Ds 
143 storageDriver.transaction(function (t) { 
// 新 建 事务 创建 数据 表 
144 t.executeSql ("CREATE TABLE IF NOT EXISTS " + DB NAME + 
145"(name TEXT PRIMARY KEY, Value TEXT NOT NULL)"); 
146 t.executeSql ("SELECT value FROM " + DB NAME + ”WHERE 
147name = 'data'", [], function (t,results) { 
148 if (results.rows.length) { 
149 try { data = JSON.parse (results.rows.item(0). 
value); 
150 } catch (ex) { data = {}; }; 
Ls }; 
让 久 六 Storage.isReady = true; 
153 Es 
154 Ds 
155 } else if (storageMode === MODE USERDATA) { 
// IE 5、IE 6 and IE 7 下 使 用 UserData 
156 storageDriver = DOC.createElement ('span'); 
5 storageDriver.addBehavior ('#default#userData'); 
// 添加 存储 数据 行为 
158 _mix(Storage, { 
59 _save: function () { 
160 var data = JSON.stringify (data); 
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161 EE 
162 storageDriver.setAttribute (USERDATA NAME, data); 
163 storageDriver.save (USERDATA PATH); 
// 存 入 用 户 本 地 
164 } catch (ex) { }7 
165 
166 Ds; 
167 if ($.isReady) { _doReady(); 
168 } else { $(document) .ready( doReady); }; 
// 监听 文档 aomready 事 件 
169 下 
170 } else { Storage.isReady = true; }; 
mw Var interval = WIN.setInterval (function () { 
// 处 理 类 库 预 准备 完毕 
hj if (Storage.isReady) { 
173 readys.forEach (function (fn) { try { fn() } catch (e) { }; }); 
// 循环 执行 监听 方法 
174 WIN.clearIinterval (interval); 
175 interval = null; 
176 readys = []; 
EEF }; 
178 }, 100); 
179 WIN.Storage = Storage; // 转 到 全 局 对 象 


180 }) (this) 7 


所 _ 
| 臣下。 本 类 库 依赖 于 JSON 和 jQuery， 读 者 可 以 使 用 DouglasCrockford 大 师 的 JSONjs 类 库 。 
该 类 库 支持 市 面 上 所 有 的 浏览 器 ， 包 括 移 动 端 浏览 器 ， 表 2.19 列 举 了 不 同 兼容 存储 技术 
对 应 的 浏览 器 类 别 。 
表 2.19 不 同 兼容 存储 技术 对 应 的 浏览 器 类 别 


存储 技术 浏览 器 
LocalStorage IE 8+、Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10.5+、iPhone 2+、Android 2+ 


GlobalStorage Firefox 2+、Firefox 2.x 、Firefox 3.0.x 
Database Storage | Safari 3.1 、Safari 3.2 
ES EG IE7 


代码 第 39 行 ~ 第 50 行 为 类 库 的 应 用 接口 和 属性 ， 提 供 了 6 个 方法 和 一 个 属性 ， 说 明 如 下 。 


。 clear: 清空 当前 域名 下 所 有 存储 数据 。 

。 length: 获取 当前 域名 下 存储 的 键 值 对 个 数 。 

。 getItem: 获取 当前 域名 某 个 键 值 的 数值 ， 传 递 的 第 三 个 参数 为 是 否 返回 JSON 格 式 。 
。 removeItem: 移 除 当 前 域名 下 某 个 键 值 对 。 

。 setItem: 存储 键 值 对 到 当前 域名 ， 传 递 的 第 三 个 参数 表示 是 否 存储 为 JSON 格 式 。 

。 ready: 类 库 的 事件 回调 函数 准备 完毕 。 

。 isReady: 类 库 是 否 准 备 完毕 。 


与 传统 的 LocalStorage 不 同 ， 本 类 库 的 getitem 和 setftem 方 法 允许 接收 JSON 格 式 数据 ， 而 
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传统 的 数据 格式 只 能 为 字符 串 ， 这 是 考虑 到 日 常 开发 的 使 用 ， 而 且 还 提供 了 length 方 法 ， 方 便 
开发 者 获取 存储 键 值 的 个 数 。 


2.8.4 如 何在 实际 开发 中 使 用 本 地 存储 


虽然 HTML 5 的 Web 存 储 技术 非常 强大 ， 但 并 不 能 完全 替代 Cookies。Web 存 储 是 一 种 完全 
作用 于 客户 端的 存储 技术 ， 无 法 随 着 客户 端 请 求 被 发 送 至 服务 器 ， 而 Cookies 可 以 作为 请 求 数 
gee 比如 最 常用 的 网 页 登录 信息 还 是 需要 通过 Cookies 来 做 
实现 ， 但 在 前 面 的 章节 已 经 介绍 过 ， 过 多 的 使 用 Cookies 是 一 种 低 效 甚至 会 引发 一 些 意 想 不 到 
的 异常 问题 的 方法 ，HTML a 现 正好 补充 了 Cookies 的 这 些 局 限 。 

当 网 站 新 上 了 一 个 产品 ， 要 让 用 户 第 一 时 间 知 道 已 经 有 一 个 新 的 功能 可 以 使 用 ， 这 时 候 
需要 制作 一 个 提示 框 来 提醒 用 户 使 用 ， 当 用 户 关闭 提醒 时 只 针对 当前 浏览 器 ， 而 用 户 再 次 以 
其 他 浏览 器 打开 时 ， 提 醒 仍然 出 现 。 下 面 将 结合 上 一 章节 的 类 库 ， 通 过 示例 制作 这 一 功能 ， 
代码 如 下 : 

01 <!DOCTYPE html> 

02 <html> 

03 <style type="text/css">/* 样式 代码 省 略 ， 详 见 本 书 网 络 资源 */</style> 

04 <script src="../js/jquery-1.8.3.js"></script> 

05 <script src="../js/localstorage.js"></script> 

<!-- localstorage 类 库 引 用 --> 


06 <body> 
07 <xdiv class="top-tips" style="display:none"> 
08 <p> 网 站 有 新 功能 上 线 啦 ， 快 来 体验 吧 ! </p> 
09 <a href="#" class="delt" title=" 不 再 提示 "> 不 再 提示 <span></span></a> 
<!-- 关闭 按钮 --> 
10 </div> 
11 </body> 
12 <script type="text/javascript"> 
13 Storage.ready (function () { // 存储 模块 准备 就 绪 回 调 
14 var tips = document .querySelector('div.top-tips'), 
// 提示 容器 
15 key = 'htm15_close'， // 存储 键 值 
16 data = Storage.getItem(key); // 获取 存储 数据 
jr if(!data){ 
18 tips.style.display = 'block'; 
9 tips.querySelector('a.delt') .addEventListener 
('click', function(e) {// 监听 关闭 按钮 单 击 事件 
20 e.preventDefault (); 
Storage.setItem(key,1); 
// 存储 数据 ， 表 示 已 被 用 户 关闭 
2 tips.style.display = 'none'; 
2 }，vfalse)7 
24 }; 
25 }) 


26 </script> 
27 </html> 
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使 用 Chrome 浏 览 器 打开 示例 ， 效 果 如 图 2.50 所 示 。 


9] LocalStorage hta# 总 


€3CIa 


网 站 有 新 功能 上 线 叭 ， 快 来 体验 吧 ! 


图 2.50 LocalStorage 示 例 效 果 


当 用 户 单 击 右 侧 关闭 按钮 时 ， 程 序 将 调用 LocalStorage 类 库 的 setItem 方 法 ， 将 数据 1 存储 
于 键 值 “html5_close” 中 ， 下 次 打开 网 页 时 ， 首 先 会 获取 “html5_close” 键 值 的 数据 ， 当 发 
现 数 据 存 在 时 不 显示 提示 信息 。 


2.9 HTML 5 的 通信 


在 HTML 5 通信 出 现 前 的 很 长 一 段 时间 ， 网 络 的 传输 模式 比较 单一 ， 都 是 围绕 着 HTTP 的 
请 求 和 响应 模式 而 构建 。 由 于 HTTP 的 无 状态 性 ， 浏 览 器 加 载 完毕 一 张 网 页 ， 然 后 直到 用 户 
操作 进入 下 一 页 之 前 ， 都 不 会 发 生 行为 。 

随 着 2005 年 Web 2.0 的 到 来 ，Ajax 技 术 开始 兴起 ， 原 本 静止 的 网 页 变 得 动态 ， 但 并 没有 改 
变 所 有 HTTP 通 信 都 是 由 浏览 器 控制 的 局 面 。 如 果 要 实现 数据 定时 更 新 ， 就 需要 使 用 Ajax 做 定 
期 的 轮 询 ， 以 便 从 服务 器 加 载 最 新 的 数据 。 后 期 由 于 部 分 产品 实时 通信 的 需要 ， 也 发 展 出 了 
各 种 可 以 让 服务 器 推送 新 数据 的 技术 ， 例 如 最 为 著名 的 Comet 技 术 ， 使 用 了 Comet 技 术 的 产品 
如 Google Talk。 尽 管 出 现 了 一 些 临 时 解决 的 技术 方案 ， 但 有 些 如 在 线 游戏 的 使 用 场景 ，HTTP 
请 求 所 带 来 的 额外 消耗 不 容 小 凯 ， 直 接 导致 应 用 的 延迟 。HTML 5 通信 的 出 现 解 决 了 这 些 问 
题 ， 其 提供 了 更 加 标准 和 统一 的 解决 方案 ， 下 面 就 将 介绍 各 种 HTML 5 带 来 的 通信 技术 。 


名- Comet 技 术 是 一 种 用 户 Web 的 推送 技术 ， 读 者 可 以 参看 维基 百科 了 解 Comet 的 相关 信息 ， 地 址 
医 为 http://zh.wikipedia.org/wiki/Comet_ (web 技术 )。 


2.9.1 PostMessage API 


了 PostMessage 又 被 称 为 跨 文档 消息 通信 。 浏 览 器 在 设计 之 初 ， 出 于 安全 的 考虑 ， 在 同一 个 
浏览 器 中 的 框架 、 标 签 页 、 窗 口 之 间 的 通信 一 直 受 到 严格 的 安全 限制 ， 但 实际 又 存在 一 些 让 
不 同 站 点 之 间 通 信 交 互 的 需求 ， 因 此 HTML 5 在 规范 中 添加 了 跨 文 档 消息 通信 ， 该 规范 可 以 
确保 标签 页 、 窗 口 、IFrame 之 间 进 行 跨 源 通 信 ， 统 一 使 用 PostMessage 定 义 的 应 用 程序 接口 发 
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攀 。 所 谓 同 源 ， 就 是 指 域名 、 协 议 、 端 口 相同 ， 是 由 Netscape 提 出 的 一 个 著名 的 安全 策略 ， 现 在 
| 国 失 所 有 的 可 支持 JavaScript 的 浏览 器 都 会 使 用 这 个 策略 ， 其 实 就 是 所 谓 的 “ 跨 域 ”问题 。 


目前 各 浏览 器 对 HTML 5 的 PostMessage 接 口 支持 情况 不 同 ， 表 2.20 列 举 了 目前 主流 浏览 
器 的 支持 情况 。 


表 2.20 主流 浏览 器 PostMessage API 支 持 情况 
浏览 器 支持 版 本 


了 PostMessage 功 能 最 常 被 用 在 与 IFrame 之 间 通 信 ， 下 面 通过 一 个 示例 介绍 该 功能 的 使 用 ， 


示例 功能 需要 两 张 页 面 完 成 ， 主 页 面 代码 如 下 : 


01 <!DOCTYPE html> 


回 


02 <html> 

03 <style type="text/css"> 

04 section{ 

05 border-radius: lO0px; background-color: #f4f4f4; 

06 height: 200px; width: 400px; margin: 0 auto; padding: 1l0px; 

07 } 

08 iframe{ margin-top: Spx; width: 395px; height: 160px; } 
<!-- 窗口 样式 --> 

09 </style> 

10 <body> 

1 <section> 

i 了 <div> 发 送信 息 <input></input><button> 发 送 </button></div> 
<!-- 输入、 发 送 区 --> 

3 <div> 目 标 接收 窗口 </div> 

14 <iframe src="http://html5.me/PostMessage-Host.htm"></iframe> 
<!-- 窗口 页 面 引用 --> 

15 </section> 

16 </body> 

17 <script type="text/javascript"> 

18 Var iframe win = document.querySelector ("iframe") .contentWindow; 
// 窗口 容器 内 部 window 对 象 

19 document .querySelector ('button') .addEventListener('click',function(e) { 
// 监听 发 送 按钮 单 击 事件 

20 e .preventDefault () 7 // 阻止 默认 提交 事件 

24 iframe_win.postMessage( // 向 窗口 发 送信 息 

document .querySelector ("input") .value, // 发 送 内 容 

2 "http://html5.me" // 目标 数据 源 地 址 

24 ) 

25 ]) 


26 </script> 
27 </html> 
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窗口 子 页 面 主 要 负责 接收 信息 做 展示 ， 并 判断 传 入 数据 的 安全 性 ， 功 能 代码 如 下 : 


01 <!DOCTYPE html> 

02 <html> 

03 <body> 

04 <header> 接 收 信息 : </header><ul></ul> <!-- 数据 接收 展示 区 --> 
05 </body> 

06 <script> 

07 window.onmessage = function(e){ // 监听 postmessage 接 收 
08 if ( e.origin !== "http://localhost" ) { // 判断 发 送 端 源 地 址 

09 return; 

10 }; 

44 var li = document.createElement ('1i'); // 创建 数据 条 目 

12 1i.innerHTML = e.origin + " 发 送 : " + e.data; 

3 document .querySelector ('ul') .appendchild (1i); // 展示 数据 

Ta Ty 

15 </script> 

16 </html> 


运行 该 示例 首先 需要 布置 两 张 页 面 ， 以 Windows 操 作 系 统 为 例 ， 将 主页 面 和 子 页 面 均 布 
置 在 Apahce 搭 建 的 Web 服 务 器 上 (或 使 用 IS、Nginx 等 ) 。 示 例 中 的 场景 需要 主页 面 和 子 页 
面 分 属于 两 个 不 用 的 域名 ， 本 示例 主页 面 域名 为 http://localhost， 子 页 面 的 域名 为 http://html5. 
me， 子 页 面 域名 是 一 个 修改 了 本 地 host 文 件 的 伪造 域名 ， 可 以 用 于 通过 修改 本 地 计算 机 目录 
C:\Windows\System32\drivers\etc 下 的 hosts 文 件 ， 在 其 中 添加 一 行 代 码 实现 : 


127.0.0.1 html5.me 
准备 就 绪 后 ， 使 用 Chrome 浏 览 器 打开 网 址 ， 效 果 如 图 2.51 所 示 。 


DoceaUPos essere x 


\ © 3 localhost/Posth nthtm OE 


发 送信 息 | 
目标 接收 座 品 


接收 信息 。 


子 页 面 
Dp 


图 2.51 PostMessage 主 页 面 效 果 


在 主页 面 输入 框 内 随意 输入 123 字 符 串 ， 单 击 “ 发 送 ”按钮 ， 子 页 面 接收 主 


传递 的 


| 


内 容 并 显示 在 页 面 上 ， 效 果 如 图 2.52 所 示 。 
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发 送信 息 |23 


目标 接收 窗口 
接收 信息 ， 
。 http://localhost 发 送 : 123 


图 2.52 主页 面 输入 发 送 内 容 ， 子 页 面 即时 显示 


示例 关键 方法 是 postMessage， 接 收 两 个 参数 ， 第 一 个 参数 表示 发 送 的 数据 内 容 ， 第 二 个 
参数 表示 消息 传送 目标 页 面 的 域名 地 址 。 在 目标 页 面 上 通过 监听 window 的 message 事 件 接收 
主页 面 传递 过 来 的 数据 ， 同 时 利用 事件 回调 函数 返回 的 事件 对 象 属性 origin 判 断 过 滤 数 据 源 ， 
最 后 通过 事件 对 象 属性 data 获 取 主 页 面 传送 的 数据 。 


2.9.2 XMLHttpRequest Level 2 


XMLHttpRequest Level 2 是 早期 XMLHttpRequest 的 升级 版 ， 最 初 的 XMLHttpRequest 被 设 
计 为 仅 限 于 同 源 通信 ， 这 使 得 同一 站 点 的 二 级 、 三 级 域名 之 间 传 输 数据 无 法 实现 ， 更 不 用 说 
不 同 站 点 域名 之 间 的 数据 传输 ， 叶 致 后 续 演变 出 了 JSONP 方 法 。 

XMLHttpRequest Level 2 对 同 源 策略 进行 了 修改 ， 人 允许 实现 跨 源 的 数据 请 求 ， 同 时 还 添加 
了 progress 事 件 用 于 监听 请 求 进 度 ， 返 回 进度 信息 。XMLHttpRequest Level 2 要 求 所 有 跨 域 的 
请 求 都 要 使 用 HTTP 协 议 中 的 origin 信 息 头 ， 同 时 数据 接收 服务 器 需要 具备 CORS 策 略 ， 各 种 
服务 器 的 CORS 策 略 设置 可 以 参考 网 站 http://enable-cors.org/。 


攀 。” JSONP 利 用 script 标 签 里 面 的 跨 域 特性 进行 跨 域 数据 访问 ， 在 script 标 签 里面 存 在 的 是 一 个 跨 
| 臣下。 域 的 URL， 实 际 执行 的 时 候 通 过 这 个 URL 获 得 一 段 字符 囊 ， 这 自 返 回 的 字符 串 必须 是 一 个 合 
法 的 JavaScript 调 用 ， 通 过 EVAL 方 法 执行 这 个 字符 串 来 完成 对 获得 的 数据 的 处 理 。 


目前 主流 浏览 器 对 XMLHttpRequest Level 2 的 支持 情况 如 表 2.21 所 示 。 


表 2.21 主流 浏览 器 XMLHttpRequest Level 2 支持 情况 


Chrome 2.0+ 

Firefox 3.5+ | 
IE 10.0+ | 
Opera 12.0+ | 
Safari 4.0+ | 


下 面 通 过 示例 介绍 XMLHttpRequest Level 2 的 使 用 ， 示 例 分 为 两 部 分 ， 客 户 端 和 服务 器 
端 ， 服 务 器 端 采用 Nodejs 技 术 开发 。 
浏览 器 客户 端 代 码 如 下 : 


@ |HTML 5 网 页 发 实 四 洋人 


01 <!DOCTYPE html> 
02 <html> 

03 <body> 

04 数据 : <input></input><button> 获 取 </button> <!-- 数据 获取 显示 区 --> 
05 <script> 


06 document .querySelector('button') .addEventListener('click',function(e){ 
// 监听 按钮 单 击 事件 
07 e.preventDefault () 7 // 阻止 按钮 提交 默认 提交 事件 
08 var xhr = new XMLHLLtPRequest () 7 // 实例 XMLHttpRequest 对 象 
09 if(typeof xhr.withCredentials === undefined){ 
// 判读 浏览 器 是 否 支持 Level 2 
10 console.1og ("浏览 器 不 支持 html5 XMLHttpRequest Level 2 的 跨 源 请 求 支持 ") ; 
Lb }elsef{ 
12 xhr.onload = function(){ // 监听 ajax onload 事 件 
3 var data =JSON.parse (xhr.responseText) // 将 文本 转 为 JsoN 数 据 
14 document .querySelector('input') .value = data.data; 
// 显示 返回 数据 
LD bs; 
16 xhr.onerror = function(e){ console.log(e) }; // 监听 ajax 错误 事件 
7 xhr.open ("GET", "http://localhost:8080/", true); 
// 设置 请 求 地 址 和 方法 
18 xhr.send(); // 发 送 Ajax 
19 J 
20 ]) 7 
21 </script> 
22 </body> 
23 </html> 
服务 器 端 采用 Nodejs 技 术 编写 ， 代 码 如 下 : 
01 var http = require("http"); // 引用 http 模 块 ， 用 于 web 服 务 器 
02 http.createServer (function (req, res) { // 创建 新 服务 器 
03 res.setHeader ('Access-Control-Allow-Origin', ‘'http://localhost'); 
// 所 有 域名 跨 域 访问 均 可 以 被 通过 
04 res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); 
// 服务 器 支持 ' GET，PosT ' 方法 
05 req.setEncoding ('utf8°'); // 设置 接收 数据 编码 格式 为 UTF-8 
06 res.end(JSON.stringify({data:'Hello World!'})); // 返回 测试 数据 
07 ]) .listen(8080，function () { // 设置 web 服务 器 监听 端口 ， 并 启动 服务 
08 console.log('listening on http://localhost:8080')7 
// 控制 台 显示 web 服务 器 启动 成 功 
09 1); 


首先 启动 Nodejs 服 务 ， 在 Windows 下 打开 命令 行进 入 服务 对 应 的 “XMLHttpRequestLevel2- 


Server” 文 件 夹 ， 执 行 代 码 如 下 : 


node server.js 


如 果 启动 成 功 ， 命 令 行 提示 如 下 ; 


listening on http://localhost:8080 


将 浏览 器 客户 端 页 面部 署 在 Web 服 务 器 上 ， 如 IIS、Apache、Nginx 等 。 打 开 示 例 页 


加 
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效果 如 图 2.53 所 示 。 


€ 3 GD1localhost/QLHttpReauestLevel2Client.hm 家 | 兮 名 三 


| 


图 2.53 XMLHttpRequest Level 2 客户 端 页 面 效 果 题 


单 击 “ 获 取 ” 按 钮 ， 页 面 通过 XMLHttpRequest Level 2 请 求 远 端 非 同 源 地 址 “http:// 
localhost:8080/”， 获 取 的 数据 显示 在 文本 框 内 ， 效 果 如 图 2.54 所 示 。 


DD seathesVXMDtttgRegses x 
所 CC Dlocalhost, 


数据 ，Peowa 一 一 一 
TC sa 


图 2.54 单 击 “ 获 取 ” 按 钮 从 远 端 非 同 源 服务 器 获取 数据 


在 判断 浏览 器 是 否 支 持 XMLHttpRequest Level 2 情况 时 ， 可 以 通过 判断 对 应 实例 对 象 的 
withCredentials 属 性 是 否 存 在 ， 如 果 存 在 则 表明 浏览 器 支持 XMLHttpRequest Level 2， 其 他 的 
用 法 与 传统 的 XMLHttpRequest 相 同 。 

XMLHttpRequest Level 2 对 和 远 端 请 求 的 服务 器 有 一 定 的 要 求 ， 需 要 在 服务 器 端 返回 的 HTTP 
信息 头 中 指明 支持 的 域名 ， 示 例 中 使 用 Node.js 设 置 的 Access-Control-Allow-Origin 信 息 头 为 

“http://localhost”， 表 示 支 持 非 同 源 的 “http://localhost” 发 送 的 客户 端 请 求 ， 如 果 想 对 所 有 请 
求 都 做 通过 处 理 ， 可 以 设置 为 “*” 号 。 如 果 要 指定 多 个 ， 一 般 会 认为 使 用 以 下 写法 : 


res.setHeader ('Access-Control-Allow-Origin', 'http://localhost, 


http://test.com'); // 域名 之 间 用 逗号 
res.setHeader('Access-Control-Allow-Origin', 'http://localhost 
http://test.com '); // 域名 之 间 用 空格 


非常 不 幸 的 是 ， 浏 览 器 无 法 识别 上 述 两 种 返回 头 ， 推 荐 的 使 用 方法 是 先 对 请 求 域名 做 判 
断 ， 如 果 符 合 业务 要 求 ， 再 设置 对 应 域名 的 Access-Control-Allow-Origin 头 信息 。 


2.9.3 WebSocket API 


WebSocket 的 出 现 ， 使 得 服务 器 与 客户 端 在 允许 的 时 间 范 围 内 互相 推送 信息 成 为 可 能 。 
传统 的 Ajax 技术 需要 由 客户 端 主动 发 起 请 求 ， 而 WebSocket 可 以 在 服务 器 与 客户 端 之 间 彼 此 相 
互 推送 ， 同 时 还 允许 跨 域 通信 。 越 来 越 多 的 对 即时 性 要 求 很 强 的 应 用 也 可 以 通过 WebSocket 
完美 解决 ， 如 股票 信息 更 新 显示 、 实 时 的 网 页 聊天 、 多 人 在 线 游戏 等 。 

WebSocket 的 通讯 流程 可 以 通过 时 序 图 2.55 表 示 。 
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浏览 器 服务 器 


WebSocket 握 手 


图 2.55 WebSocket 的 通讯 流程 


WebSocket 目 前 已 经 得 到 众多 主流 浏览 器 的 支持 ， 表 2.22 显 示 了 目前 浏览 器 的 支持 情况 。 


表 2.22 主流 浏览 器 WebSocket 支 持 情况 
浏览 虽 支持 版 本 


WebSocket 的 使 用 还 是 相对 简单 的 ， 通 过 WebSocket 构 造 函数 就 能 创建 WebSocket 链 接 ， 
代码 如 下 : 

Var socket = new WebSocket('ws://html5.me', ['soap', 'wamp']); 

以 ws 开头 的 协议 为 WebSocket 新 增 的 连接 协议 ， 另 外 对 于 安全 的 WebSocket 连 接 有 wss 协 
议 ， 类 似 于 大 家 熟悉 的 https 协 议 为 http 的 安全 协议 。 

构造 函数 的 第 二 个 参数 表示 可 接收 的 子 协议 ， 人 允许 传递 单个 字符 串 或 者 由 字符 串 组 成 的 
数组 ， 除 了 示例 代码 中 使 用 的 soap 和 wamp 外 ， 目 前 WebSocket 还 接收 其 他 多 种 子 协议 ， 详 情 
可 以 参考 网 站 http://www.iana.org/assignments/websocket/websocket.xml。 

WebSocket 提 供 了 多 种 事件 用 于 监听 数据 传输 ， 如 下 : 


socket .onopen = function () { // Websocket 请 求 开 始 
socket .send(' 客 户 端 数据 ' ) ; // 向 服务 器 发 送 数 据 

}; 

socket .onerror = function (error) 1{ 
console-1log('Websocket 错误 : ' + error); // WebSsocket 错 误 监听 

] 7 

socket .onmessage = function (e) { // Websocket 返 回 数据 监听 


console.1log ( "服务器 返回 数据 : ' + e.data); 

] 

socket .onclose = function (e) { // Websocket 请 求 关 闭 监听 
console.1og(' 通 道 关 闭 ') ; 
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4 更 多 WebSocket 标 准 介 绍 可 以 参考 网 站 http://www.w3.org/TR/2012/WD-websockets-20120524/。 


2.9.4 Socket.IO 通 信 框 架 介绍 


Socket.IO 是 Guillermo Rauch 开 发 的 基于 Node.js 的 应 用 项 目 ， 以 实现 跨 浏 览 器 和 跨 平台 应 


为 目标 。Guillermo Rauch 本 人 是 LearmmBoost 公 司 的 首席 技术 官 以 及 LeamBoost 实 验 室 的 首席 
科学 家 。Socket.IO 针 对 于 不 同 的 浏览 器 会 做 自动 优雅 降级 ， 选 择 当 前 浏览 器 最 合适 的 实现 方 
式 ， 如 在 一 些 不 支持 HTML 5 Web 


Socket 的 浏览 器 上 ， 会 使 用 长 连接 的 Ajax 技 术 。 同 时 Socket. 


IO 提供 了 一 套 平台 统一 的 应 用 程 


争 接 口 ， 开 发 者 在 使 用 时 完全 不 需要 考虑 浏览 器 的 兼容 问 


题 ， 只 需要 把 注意 力 放 在 业务 开发 上 。 


攀 


Socket.IO 官 网 地 址 为 http://socket.io/。 


在 使 用 Socket.IO 功 能 时 ， 首 先 需要 使 用 Node.js 的 包 管理 工具 下 载 Socket.IO 和 其 相关 的 依 
赖 模块 ， 执 行 代码 如 下 : 
npm install socket.io 
在 示例 文件 夹 执 行 后 ， 包 管理 工具 会 自动 下 载 相关 依赖 ， 如 图 2.56 所 示 。 
妈 2.56 Socket.IO 安 装 下 载 
下 面 的 示例 展示 了 一 个 简单 的 与 服务 器 双向 通信 的 过 程 ， 客 户 端 代码 如 下 : 
01 <!DOCTYPE html><html> 
02 <body> 
03 显示 : <input></input><br> <!-- 信息 显示 区 域 --> 
04 类 型 : <select> <!-- 获取 数据 类 型 选择 --> 
05 <option value="year"> 年 </option> 
06 <option value="month"> 月 </option> 
07 <option value="day"> 日 </option> 
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08 
09 
10 


11 
hE 


13 
14 


15 
16 


Eh 
18 


DT 
20 
2 


</select> 
<button> 获 取 </button> <!-- 获取 操作 按钮 --> 
<script src="/socket.io/socket.io.js"></script> 
<!-- 通信 兼容 脚本 --> 
<script> 
Var socket = io.connect('http://localhost:8080°'); 
// 与 服务 器 连接 
socket.on('news', function (data) { // 监听 服务 器 自 定义 事件 
document .querySelector('input') .value = data; 
// 将 服务 端 返 回 的 数据 输出 显示 
Ts 
document .querySelector('button') .addEventListener('click',function(e){ 
// 监听 获取 单 击 事件 
e.preventDefault (); // 阻止 按钮 默认 提交 事件 
socket.emit('test', document.querySelector('select') .value); 
// 向 服务 器 发 送信 息 
1D); 
</script> 
</body></html> 


服务 端 采用 Nodejs 搭 建 ， 利 用 了 SocketIO 通 信 框 架 ， 代 码 如 下 ; 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


二 


1 
14 
15 
16 
让 
18 
ES 
20 


之 


六 


之 3 
24 


Var app = require('http') .createServer (handler) // 创建 服务 器 模块 
, io = require('socket.io').listen (app) // socket .io 监 听 服 务 器 端口 
, fs = require('fs'); // 引用 文件 读 取 模 块 
app.listen(8080); // 启动 服务 器 监听 8080 端 口 
function handler (req, res) { 


fs.readFile( dirname + '/SocketIO.htm', // 服务 根 目录 文件 
function (err, data) { // 读 取 回调 事件 
if (err) { 
res.writeHead(500); 
return res.end(' 页 面 SocketIO.htm 加 载 失 败 '); 
// 失败 返回 页 面 错误 信息 
} 
res.writeHead(200, {'Content-Type': 'text/html'}); 
// 设置 成 HTTP 信 息 头 
res.end(data); // 返回 页 面 数 据 
Ds 
} 
io.sockets.on('connection'，function (socket) { // 监听 socket 连 接 事件 


socket .emit ('news'，' 欢 迎 加 入 Websocket' ); // 向 连接 客户 端 广 播 数 据 
socket.on('test', function (data) { // 监听 自 定义 test 事 件 
switch (data) { // 判断 获取 的 数据 类 型 
case 'year' : socket.emit('news', new Date(). 
getFullYear ()) ;break; // 返回 当前 年 信息 
case 'month' : socket.emit('news', new Date(). 
getMonth () +1) ;break; // 返回 当前 月 信息 
case 'day' : socket.emit('news', new Date () .getDate());break; 
// 返回 当前 日 信息 
. 
]) 
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25° 1) 


进入 示例 代码 的 SocketIO 文 件 来， 启动 Node.js 服 务 ， 代 码 如 下 : 


node server.js 


丁 开 浏览 器 ， 在 地 址 栏 输入 页 面 地 址 http://localhost:8080/， 效 果 如 图 2.57 所 示 。 页 面 打开 后 ， 


浏览 器 与 服务 器 通过 WebSocket 连 接 ， 服 务 端 向 客户 端 发 送 欢 迎 信息 ， 客 户 端 接 收 后 显示 在 文本 
框 内 。 单 击 “ 获 取 ” 按 钮 ， 此 时 浏览 器 客户 端 向 后 端 发 送 获取 请 求 ， 服 务 器 对 请 求 的 传 入 数据 类 
别 做 出 判断 ， 返 回 相应 的 数据 ， 客 户 端 接收 数据 显示 在 文本 框 内 ， 效 果 如 图 2.58 所 示 。 


合 localhost:8080 
所 © Dlocalhost:3080 训 全 OE 三 


显示 网 迎 加 入 WebSocket 
类 型 ，[ 后 司 芽 现 


图 2.57 客户 端 浏览 效果 


会 localhost:8080 x 


€ 3 CC Dlocalhost:: 


显示 ， 克 13 


图 2.58 单 击 页 面 的 “获取 ”按钮 


通过 示例 可 以 发 现 ， 使 用 WebSocket 完 全 没有 任何 延迟 ， 服 务 器 端 可 以 同时 支持 多 个 客户 端 
接 入 ， 并 可 以 同时 推送 和 广播 多 个 接 入 客户 端 。SocketIO 为 开发 者 抹 平 了 浏览 器 兼容 ， 是 Nodejs 


下 实时 应 用 开发 的 最 好 选择 ， 赶 快 动手 写 个 自己 的 示例 ， 一 同感 受 WebSocket 世 界 的 精彩 吧 。 


2.10 Web Workers 


浏览 器 中 的 JavaScript 一 直 运行 在 单线 程 的 环境 中 ， 所 以 在 做 网 站 前 端 优化 时 ， 习 惯性 的 
将 JavaScript 放 置 在 页 面 的 底部 ， 这 样 可 以 让 页 面 的 内 容 更 快 的 加 载 泻 染 。 有 的 时 候 ， 遇 到 前 
端 处 理 页 面 大 量 数据 会 使 用 setTimeout 方 法 ， 错 开 任务 的 执行 时 间 ， 避 开 同 一 时 间 执 行 造成 的 
交互 停滞 。 这 些 做 法 虽然 在 一 定 程度 上 能 起 到 优化 效果 ， 但 显而易见 的 是 浏览 器 单线 程 执行 


JavaScript 制 约 了 浏览 器 实现 富 应 用 的 脚步 。 


HTML 5 提出 了 Web Workers 新 功能 ， 使 得 JavaScript 可 以 类 似 于 线程 一 样 的 实现 并 行 ， 充 


分 利用 现在 计算 机 多 核 的 处 理 优势 。 开 发 者 可 将 一 些 脚本 处 理 的 计算 密集 型 任务 分 配给 Web 


Workers 处 理 ， 而 不 阻碍 页 面 UI 与 用 户 的 交互 。 


Workers 无 法 直接 访问 页 面 与 DOM 相 关 的 程序 接口 。 


化 Web Workers 对 象 处 理 数 据 ， 会 对 计算 机 的 CPU 产生 消耗 ， 导 致 系统 响应 速度 降低 。 
所 以 ， 只 有 在 合适 的 场景 使 用 Web Workers 可 以 使 浏览 器 应 用 变 得 更 加 流畅 ， 目 前 ， 市 盏 
上 的 浏览 器 对 Web Workers 的 支持 情况 各 不 相同 ， 表 2.23 为 主流 浏览 器 对 Web Workers 的 支持 


情况 。 


Web Workers 虽 然 强大 ， 但 也 需要 在 合适 的 场景 内 使 用 ， 对 于 有 些 情 况 的 处 理 还 是 受到 浏 
览 器 的 限制 ， 比 如 在 Web Workers 中 执行 的 脚本 无 法 访问 页 面 window 对 象 ， 也 就 是 说 ，Web 


同时 ， 如 果 开 发 过 程 中 出 现 过 多 的 实例 
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表 2.23 主流 浏览 器 对 Web Workers 的 支持 情况 


ee 


浏览 
Chrome 4.0+ 
Firefox E 人 
正 10+ 
Opera 10.6+ 
Safari 4.0+ 
接 下 来 ， 将 了 解 Web Workers 的 基本 使 用 ， 同 时 介绍 如 何 与 页 面 进行 通信 ， 最 后 会 演示 一 


个 小 示例 学 习 在 实际 开发 过 程 中 使 用 Web Workers。 


2.10.1 与 HTML5 Web Workers 通 信 


作为 一 项 在 浏览 器 内 使 用 的 新 技术 ， 与 页 面 DOM 交 互 是 必 不 可 少 的 ， 但 是 Web Workers 不 能 直 
接 对 DOM 进 行 处 理 ， 需 要 通过 事件 模型 和 postMessage 方 法 实现 。postMessage 接 受 字符 串 或 JSON 对 
象 作为 参数 ， 具 体 使 用 情况 取决 于 用 户 的 浏览 器 ， 在 新 型 的 浏览 器 中 可 以 支持 传递 JSON 对 象 。 

下 面 通 过 一 个 Hello World 示 例 介绍 Web Workers 的 使 用 ， 浏 览 器 端 代码 如 下 : 


Var worker = new Worker('web worker.js'); // 实例 化 Web Workers 对 象 ， 传 递 脚本 
worker.addEventListener('message', function(e) { 


// 监听 worker 的 message 事 件 ， 接 收 返回 信息 


console.log(e.data); // 打印 返回 数据 
}, false); 
worker.postMessage ('Hello World'); // 向 Web Workers 示 例 发 送信 息 


Web Workers 脚 本 文件 web_workerjs 的 代码 如 下 : 


self.addEventListener('message', function(e) { 


// 监听 message 事 件 ， 接 收 页 面 传递 数据 
self.postMessage (e.data); // 向 调用 页 面 输送 信息 


}, false); 
2.10.2 多 个 JavaScript 文 件 的 加 载 与 执行 


对 于 一 些 较为 复杂 的 应 用 来 说 ，Web Workers 内 部 可 能 需要 加 载 外 部 脚本 ， 保 持 代码 功能 
的 唯一 性 。 在 网 页 上 加 载 多 个 脚本 ， 大 家 都 知道 可 以 通过 添加 多 个 script 标 签 ， 当 页 面 加 载 时 
同步 加 载 JavaScript 文 件 ， 对 于 Web Workers 来 说 ， 道 理 也 类 似 ， 不 过 需要 借助 于 importScripts 
方法 ， 语 法 如 下 : 

importSscripts('other.js'); 

importScripts 方 法 除了 支持 传递 单个 参数 外 ， 还 允许 接收 多 个 脚本 传递 ， 语 法 如 下 : 


LMPOrEScoripts( soriptis js , vacript203)3)s 


2.10.3 子 Web Workers 和 内 访 Web Workers 
在 单个 Web Workers 实 例 内 部 ， 还 允许 生成 多 个 Web Workers 实 例 ， 该 内 部 实例 称 为 子 
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Web Workers。 子 Web Workers 的 出 现 有 助 于 大 型 任务 应 用 的 拆 解 ， 不 过 对 于 子 Web Workers 来 


说 ， 


在 ， 对 


是 JSON 格 式 的 对 象 数 据 。 
内 骨 Web Workers 可 以 在 不 下 载 外 链 脚本 文件 的 情况 下 生成 Web Workers。 将 之 前 Hello 
World 示 例 采 用 内 艇 Web Workers 重 新 编写 ， 代 码 如 下 ; 


01 var blob = new BlobBuilder (); // 实例 化 BlobBuilder 对 象 

02 blob.append("onmessage =function(e) {self.postMessage (le.data);} "); 
// 填充 Web Workers 脚 本 内 容 

03 var blobURL = window.URL.createObjectURL (blob .getBlob()) 7 
// 生成 数据 连接 


也 址 必须 与 主 Web Workers 同 源 ， 并 且 如 果 设 置 的 是 相对 路 径 ， 会 按照 主 Web Workers 的 
位 置 进行 解析 ， 这 点 类 似 于 CSS 样 式 表 中 的 背景 图 片 地 址 。 
在 使 用 子 Web Workers 时 还 要 小 心 ， 在 很 多 浏览 器 中 子 Web Workers 都 会 以 单独 的 线程 存 
才 于 生成 大 批量 的 子 Web Workers 会 消耗 过 多 的 系统 资源 ， 因 为 主页 面 的 和 Web Workers 


之 间 的 通信 数据 是 复制 而 不 是 共享 ， 每 次 数据 传递 都 会 伴随 着 序列 化 和 反 序 列 化 过 程 ， 尤 其 


04 var worker = new Worker (blobURL); // 实例 Web Workers 对 象 ， 传 递 数据 内 容 


05 worker.addEventListener('message', function(e) { 


// 监听 worker message 事 件 ， 接 收 信息 


06 console.log(e.data); // 打印 返回 数据 
07 }, false); 
08 worker.postMessage('Hello World'); // 向 Web Workers 示 例 发 送信 息 


级 ， 如 在 Chrome 下 使 用 window.webkitURL。 


2.10.4 构建 Web Workers 应 用 


黑 


在 现实 开发 中 Web Workers 常 常 被 用 于 处 理 大 型 密集 型 数据 任务 ， 可 以 有 效 的 避免 阻塞 3 
UI 线程 泻 染 交互 。 本 例 将 演示 通过 Web Workers 在 后 台 处 理 图 片 数 据 ， 包 含 对 图 片 进行 逆 色 逢 


处 理 功能 ， 并 将 处 理 结束 后 的 图 片 数 据 信 息 发 送 至 前 人 台 页 面 进行 泻 染 。 


惕 上 面 示例 中 window 的 URL 属 性 对 象 ， 晶 前 各 浏览 器 的 实现 不 同 ， 在 使 用 时 需要 加 上 浏览 器 前 


五 


运行 示例 之 前 ， 首 先 将 代码 部 署 在 Web 服 务 器 上 ， 如 Apache、IIS 或 Nginx 等 ， 使 


Chrome 浏 览 器 打开 WebWorker.htm， 效 果 如 图 2.59 所 示 。 


99 


D lect/Weororker ht 天 
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图 2.59 Web Workers 示 例 效 果 
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单 击 “ 逆 色 ” 按 钮 ， 按 钮 下 方 的 黑色 方 框 区 域 出 现 上 方 图 片 的 逆 色 效果 ， 如 图 2.60 


所 示 。 
A 上 : 合 御 色 好 
局 和 全 时 名 
图 2.60 单 击 “ 逆 色 ” 按 钮 
击 “ 黑 白 ” 按 钮 ， 按 钮 下 方 显示 出 现 图 片 的 黑白 色 效 果 ， 如 图 2.61 所 示 。 
人 © BD 1ocalhost/WebWorker.htm 
NS 是 澄 时 6 好 
人 pn 
图 2.61 单 击 “ 黑 白 ” 按 钮 
主页 面 代 码 如 下 : 
01 <!DOCTYPE html> 
02 <html> 
03 <body> 


04 <img src="webworker.jpg"></img> 
<!-- 示例 图 片 --> 
05 <div><button id="invert"> 逆 色 </button><button id="grayscale"> 黑 白 
</button></div> 
06 <canvas width=550 height=100 style="border:1lpx solid black"></canvas> 
07 </body> 
08 <script type="text/javascript"> 
09 var worker = new Worker('webworker.js'); 
// 实例 化 Web Workers 对 和 象 ， 传 递 脚本 
10 var context = document .querySelector('canvas') .getContext ('2d'); 
// canvas 容 器 上 下 文 对 象 
11 var buttons = document .querySelectorAll('button'); 
// 所 有 按钮 元 素 
12 var img = document .querySelector('img'); // 图 片 元 素 
13 worker.addEventListener('message', function(e) { 
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// 监听 worker message 事 件 


context.putImageDatal(le.data, 0, 0); 


// 重新 绘制 canvas 图 片 内 容 


[i];? i++){ 


buttons[i] .addEventListener('click',function(e){ 


// 阻止 按钮 元 素 默认 事件 
// 使 用 canvas 绘 制图 片 


Default (); 
rawImage (img, 0,0); 


14 
15 }, false); 
16 for(var i =0; buttons 
7 

// 监听 按钮 单 击 事件 
18 e.prevent 
19 context .d: 
20 Var imgDa: 


ta = context.getImageData(0,0,img.width, 


img .height);// 获取 canvas 绘 制 的 图 片 内 容 


stMessage({ id : this.id, data : imgData}); 


2 worker .po 
// 发 送 wepworker 图 片 数 据 

22 DD); 

23 1}; 

24 </script> 

25 </html> 


主页 面 要 完成 的 功能 比较 简 刘 


gg， 首 先 ， 实 例 化 WebWorkers 对 象 并 传递 对 应 后 全 脚本 地 


址 ， 监 听 该 对 象 的 message 事 件 ， 接 收 后 全 脚本 返回 的 数据 信息 。 接 着 ， 监 听 页 面 “ 逆 色 ” 和 


4 曙 白 


”按钮 的 单 击 事 件 ， 当 触发 单 击 事件 时 ， 使 用 canvas 的 drawImage 方 法 绘制 图 像 ， 并 通 


过 canvas 的 getImageData 方 法 获取 


图 像 的 数据 信息 ， 然 后 调用 实例 化 后 的 WebWorkers 对 象 的 


postMessage 方 法 ， 向 后 端 运 行 的 脚本 发 送 图 片 数据 信息 。 后 端 WebWorker 脚 本 代码 如 下 : 


01 var graph ={ 


02 winvert" : function(imgdata){ // 图 形 逆 色 处 理 方法 

03 var data = imgdata.data; 

04 for(var i = 0; i < data.length; i += 4) { 

05 data[li] = 255 - data[i]; 7/ 红色 

06 data[li + 1] = 255 - data[i + 1]; // 绿色 

07 data[li + 2] = 255 - data[i + 2]; // 蓝 色 

08 用 

09 return imgdata; 

10 ] 

TL "grayscale" : function(imgdata){ // 图 形 黑白 色 处 理 方法 

| var data = imgdata.data; 

3 for(var i = 0; i < data.length; i += 4) { 

14 Var brightness = 0.34 * data[il + 0.5 * data[i + 1] 
+ 0ate * datals + 21 

15 data[i] = brightness; // 红色 

16 data[i + 1] = brightness; // 绿色 

可 data[i + 2] = brightness; // 蓝 色 

18 } 

1 return imgdata; 

20 

21 上 7 

22 self.addEventListener ('message'，function(e) { 


// 监听 message 事 件 ， 接 收 页 面 传递 数据 


self.postMessage (graphle.data.id] (e.data.data)); 


// 返回 接收 的 图 形 数据 处 理 后 的 信息 


}» false); 
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后 端 WebWorker 脚 本 要 做 的 是 将 主页 面 返回 的 图 片 数 据 信息 交 给 对 应 的 图 形 处 理 方法 ， 
在 invert 或 grayscale 图 形 方法 处 理 完毕 后 ， 将 返回 处 理 后 的 数据 给 主页 面 ， 主 页 面 在 接收 到 返 
回 的 图 片 数据 后 ， 通 过 canvas 进 行 泻 染 呈 现 。 
| 所 Web Workers 的 使 用 并 不 局 限于 本 章 所 列 的 示例 ， 读 者 可 以 参考 网 站 了 解 更 多 相关 的 使 用 信息 
区 和 场景 ， 网 页 地 址 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html。 


2.11 离线 Web 应 用 


传统 的 Web 应 用 必须 建立 在 联网 的 基础 之 上 ，HTML 5 新 增 了 一 项 功能 ， 为 离线 Web 应 用 
的 开发 提供 了 可 能 性 。 假 设 用 户 使 用 在 线 的 记事 本 记录 信息 时 ， 网 络 忽然 中 断 ， 对 于 传统 的 
应 用 来 说 用 户 很 可 能 会 丢失 先前 书写 的 内 容 ， 如 果 使 用 离线 Web 功 能 开发 的 应 用 ， 用 户 可 以 
继续 离线 添加 笔记 ， 待 网 络 重新 连接 后 将 离线 数据 同步 至 线 上 服务 。 

听 到 这 里 读者 一 定 对 这 个 功能 充满 了 好 感 和 好 奇 ， 在 开发 一 个 离线 应 用 时 ， 开 发 者 一 般 
会 综合 使 用 多 种 功能 ， 如 离线 资源 缓存 的 文件 列表 Manifest 文 件 、 联 网 在 线 状 态 的 检测 、 当 
离线 状态 下 的 本 地 数据 存储 ， 这 几 种 功能 缺 一 不 可 。 

本 章 将 会 介绍 离线 Web 应 用 相关 的 方法 接口 ， 同 时 让 读者 了 解 Manifest 文 件 的 使 用 ， 最 后 
通过 一 个 示例 说 明 HTML 5 开发 离线 应 用 的 方法 。 


2.11.1 离线 Web 应 用 相关 API 


为 了 实现 离线 存储 功能 ，HTML 5 提供 了 Web 存 储 相 关 的 API， 称 为 Web Storage， 该 功能 
的 介绍 在 先前 的 章节 中 已 经 提 过 ， 包 括 LocalStorage 和 SessionStorage 两 部 分 ， 可 用 于 对 离线 数 
据 的 短暂 性 或 永久 性 存储 。 

HTML 5 另外 还 提供 了 一 套 基于 关系 型 的 数据 库 Web SQL Database， 可 以 支持 页 面 上 复 
杂 数 据 的 离线 存储 ， 例 如 可 以 存储 用 户 电子 邮件 信息 ， 消 费 账 务 流水 信息 等 ， 同 时 Web SQL 
Database 还 加 入 了 传统 数据 库 的 事物 概念 ， 使 得 多 窗口 操作 可 以 保持 数据 一 致 性 。Web SQL 
Database 数 据 库 是 基于 SQLite 开 发 的 ， 这 点 与 Web Storage 中 的 LocalStorage 相 同 。 

最 后 一 个 也 是 笔者 认为 最 为 强大 的 功能 ， 称 为 IndexedDB。IndexedDB 是 HTML 5 推出 的 
一 种 轻 量 级 的 NoSQL 数 据 库 ， 即 常 说 的 非 关 系 型 数据 库 。 比 起 传统 的 关系 型 数据 库 ，NoSQL 
数据 库 具 有 易 扩 展 、 读 写 快 速 、 成 本 低廉 等 特点 ，HIML 5 的 IndexedDB 还 同时 包含 了 常见 的 
数据 库 构造 ， 如 事物 、 索 引 、 游 标 等 ， 在 API 的 使 用 上 分 为 同步 和 异步 两 种 形态 。 下 面 通过 
一 个 简单 的 示例 介绍 IndexedDB 的 使 用 ， 代 码 如 下 : 


01 <!DOCTYPE html> 

02 <html> 

03 <body></body> 

04 <script type="text/javascript"> 

05 var request = indexedDB.open('Html5IndexedDB', 2); // 创建 一 个 数据 库 
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果 如 


06 request.onerror = function(e) { console.log(e); }; // 监听 错误 事件 


07 request.onupgradeneeded = function (event) { // 监听 事物 事件 
08 var db = event.target.result; // 获取 数据 库 对 象 
09 Var obJjectStore = db.createobjectStore ("users"，{ keyPath: "htm15" ])7 
// 创建 对 象 存储 空间 存放 用 户 信息 
10 ObjectStore -createIndex ("name", "name", { unique: false }); 
// 创建 索引 来 通过 name 搜 索 客户 
i objectStore.createIndex ("id", "id", { unique: true }); 


// 创建 索引 来 通过 email 搜索 客户 
4 objectstore.add({ html5:'1' ,name : "小 王 * ，sex 5 si 
age:23});// 存 入 一 条 用 户 信 息 数据 
13 1}; 
14 </script> 
15 </html> 


将 代码 保存 至 以 html 为 后 缀 的 文件 内 ， 部 署 在 Web 服 务 器 上 ， 如 Apache、IIS、Nginx 等 ， 
最 新 的 Chrome 浏 览 器 打开 文件 ， 然 后 打开 Chrome 浏 览 器 的 开发 者 工具 查看 缓存 内 容 ， 效 
图 2.62 所 示 。 


图 leahozvTndexeanp ht x 


© PC (Dlocalhost/InderedDB.hta 


Elements PResources| Nebwork Sources Timeline Profiles Audits Console 


?OO Fames 
vwh4web SQL 


Bd HtrmlSindexedDB - http://locahost | 
» 国 Locsl songe 
» 国 session Storage 
* 是 cookie 
* 国 Application Cache 


-RE 


图 2.62 使 用 最 新 版 Chrome 浏 览 器 打开 示例 文件 


单 击 左 侧 列表 中 的 Html5IndexedDB 项 ， 显 示 数 据 库 中 的 插入 信息 ， 效 果 如 图 2.63 所 示 。 


国 1ocahost/IndexedlB. hts x 


€ DC |D 1localhost/IndexedDB. hta 安 @ 马 = 


Elerents |Resources| Network Sources Timeline Profiles Audit Console 


vw H] HemlSindexedDB - http:/loca. 
MR 
写 nme 
例 d 
* 国 Local songe 
* 国 Session songe 
* 国 cookie; 


已 .二 Q 


图 2.63 单 击 左 侧 列表 中 的 Html5IndexedDB 
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单 击 左 侧 列表 中 的 users 选 项 ， 展 开 数 据 库 中 users 键 的 存储 信息 ， 同 时 右 侧 区 域 出 现 对 应 


键 值 的 相关 存储 数据 ， 效 果 如 图 


2.64 所 示 。 


国 1*cahozvrnae<eans ht x 


i 


© DB localhost/IndexredDB. hta 


Elements |Resources| Network Sources Timeline Profiles Audits Console 


?OO Frmes 
v Hweb SQL 


vw HindexedDB 


图 2.64 列表 中 的 users 选 项 


示例 代码 中 监听 的 upgradeneeded 事 件 当 每 次 新 建 数据 库 结构 时 触发 ， 当 再 次 打开 数据 库 
时 不 触发 该 事件 ， 而 触发 另外 的 success 事 件 。 方 法 createObjectStore 用 于 创建 对 象 的 存储 空 
间 ， 在 示例 中 请 求 申 请 一 个 名 为 users 的 对 象 空 间 ， 同 时 传递 的 第 一 个 参数 保证 了 存储 空间 中 
每 个 单独 的 对 象 都 是 唯一 的 ， 被 存储 于 空间 中 的 所 有 对 象 都 必须 存在 于 html 5 中 。 另 外 还 可 
以 看 到 使 用 了 方法 createIndex 创 建 的 数据 库 索 引 ， 示 例 中 对 name 和 id 两 个 属性 添加 了 索引 ， 
但 在 unique 属 性 上 稍 有 不 同 ，id 对 应 的 unique 为 tue， 表 示 该 键 值 所 存储 的 数据 具有 唯一 性 ， 
无 法 插入 重复 数据 ， 而 name 的 unique 为 false， 表 示 插 入 的 用 户 信息 数据 ， 并 且 允 许 用 户 出 现 


名 字 相 同 的 情况 。 


2.11.2 Manifest 使 用 介绍 


Manifest 文 件 是 HTML 5 的 离线 缓存 功能 中 引入 的 非常 重要 的 一 项 ， 代 表 Web 应 用 存储 可 


以 进行 文件 的 离线 缓存 ， 即 


使 在 没有 


因特网 的 情况 下 也 可 以 进行 访问 ， 同 时 可 以 让 加 载 资源 


变 得 更 快 ， 已 经 缓存 的 内 容 不 会 再 发 生 任何 请 求 ， 减 少 了 服务 器 的 负载 压力 ， 另 外 ， 仅 仅 只 
需要 从 服务 器 上 下 载 最 新 Manifest 文 件 就 能 对 已 有 资源 进行 更 新 。 


Manifest 文 件 只 是 一 个 证 


站 纯 文本 文件 ， 结 构 非常 简单 ， 大 致 可 分 为 4 个 部 分 。 


CACHE MANIFEST: MANIFEST 文 件 顶 部 必须 出 现 的 标题 。 

CACHE: 在 此 标题 下 方 出 现 的 文件 将 在 首次 下 载 后 进行 缓存 。 

NETWORK: 在 此 标题 下 方 出 现 的 文件 需要 与 服务 器 连接 ， 且 不 会 被 缓存 。 
FALLBACK: 在 此 标题 下 方 出 现 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 。 


一 个 简单 的 Manifest 文 件 格式 如 下 : 


CACHE MANIFEST 
CACHE: 
/demo.css 
/demo.png 
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/demo .js 

NETWORK: 

/demo2.css 

FALLBACK: 

/ajax/ ajax-html 
/htm15/ /404.html 


当 文件 名 出 现在 CACHE 下 方 后 一 直 都 会 被 缓存 ， 除 非 发 生 以 下 情况 ， 浏 览 器 才 会 再 次 更 新 : 


浏览 器 的 缓存 被 清空 ， 如 用 户 手动 操作 的 清空 缓存 。 
Manifest 文 件 被 修改 。 
应 用 程序 脚本 更 新 缓存 。 


换 句 话说 ， 如 果 不 发 生 上 面 出 现 的 情况 ， 即 使 开发 者 将 服务 器 端的 文件 进行 更 新 ， 用 户 


浏览 器 内 使 用 的 内 容 也 不 会 发 生变 化 ， 如 果 要 对 应 用 的 文件 进行 更 新 ， 这 时 候 必 须 还 要 做 的 
就 是 更 新 Manifest 文 件 。 
使 用 Manifest 缓 存 功能 时 ， 有 些 问题 需要 注意 : 


杭 _ 
| 区 


如 果 Manifest 文 件 中 某 行文 件 不 能 被 下 载 ， 更 新 过 程 将 失败 ， 浏 览 器 继续 使 用 老 缓存 
数据 。 

Manifest 文 件 必须 与 主页 面 同 源 。 

Manifest 文 件 列表 中 的 文件 地 址 的 相对 路 径 ， 以 Manifest 为 参照 物 。 

CACHE MANIFEST 标 题 只 允许 出 现在 第 一 行 ， 且 必须 存在 。 

使 用 Manifest 缓 存 功能 的 页 面 会 被 认为 自动 进行 缓存 。 


Manifest 除 了 本 节 介绍 的 注意 事项 外 ， 还 有 其 特殊 的 加 载 流程 ， 其 他 注意 事项 可 以 参考 网 站 
https://developer.mozilla.org/zh-CN/docs/HTML/Using_the_application_cache。 


2.11.3 使 用 ApplicationCache API 


上 一 节 提 到 了 使 用 Manifest 文 件 对 Web 应 用 进行 离线 缓存 ， 更 新 缓存 的 方法 一 般 需要 对 服务 器 
端的 Manifest 文 件 进行 更 新 ， 还 有 一 种 方法 就 是 使 用 浏览 器 提供 的 ApplactionCache 应 用 接口 ， 通 过 
JavaScript 操 作 ApplactionCache 对 象 达到 更 新 缓存 的 目的 。ApplactionCache 共有 三 种 方法 ， 说 明 如 下 。 


update: 发 起 应 用 缓存 下 载 进 程 ， 尝 试 更 新 缓存 。 
abort: 取消 正在 进行 的 缓存 更 新 下 载 。 
swapcache: 更 新 成 功 后 ， 切 换 为 最 新 的 缓存 环境 。 


ApplactionCache 对 象 上 还 有 一 个 常用 的 属性 status， 该 属性 有 6 种 状态 ， 如 下 : 


CHECKING: 检查 中 ， 状 态 值 为 2。 
DOWNLOADING: 下 载 中 ， 状 态 值 为 3。 
IDLE: 闲置 中 ， 状 态 值 为 1。 
OBSOLETE: 失效 ， 状 态 值 为 5。 
UNCACHED: 未 缓存 ， 状 态 值 为 0。 
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。 UPDATEREADY: 已 更 新 ， 状 态 值 为 4。 


使 用 Manifest 功 能 进行 的 文件 缓存 ， 在 每 次 Manifest 文 件 更 新 后 ， 第 一 次 刷新 页 面 用 的 
仍旧 是 老 的 缓存 内 容 ， 第 二 次 刷新 时 才 会 更 新 ， 不 过 ApplicationCache 为 开发 者 提供 了 一 种 
JavaScript 控 制 的 可 能 性 。 表 2.24 列 出 了 目前 主流 浏览 器 对 ApplicationCache 的 支持 情况 。 


表 2.24 主流 浏览 器 对 ApplicationCache 的 支持 情况 


浏览 器 


2.11.4 搭建 简单 的 离线 应 用 程序 


本 节 通 过 一 个 简单 的 缓存 更 新 示例 介绍 Manifest 和 ApplicationCache 的 使 用 。 在 使 
Manifest 文 件 之 前 ， 首 先 要 确保 Web 服 务 器 对 文件 进行 正确 的 解析 ， 以 Apache 为 例 ， 需 要 在 相 
应 的 httpd.conf 配 置 文件 中 ， 添 加 如 下 代码 配置 信息 : 


AddType text/cache-Manifest .Manifest 


采用 Chrome 做 为 演示 浏览 器 ， 有 的 Chrome 版 本 会 默认 关闭 ApplicationCache 功 能 ， 这 时 
就 需要 进入 Chrome 浏 览 器 实验 室 开 启 ApplicationCache 功 能 ， 如 图 2.65 所 示 。 


drme: /es 
€ GD chrae 
局 用 实验 伍 WebSocket 买 中 


扇 用 


启用 离线 强 存 醒 式 Mac, Windows, Linux, Chrome OS, Android 
要 沈 取 的 | 
合用 


默认 图 块 赛 度 Mac, Windows, Linux, Chrome 0S, Andiold 
指定 短 认 图 块 宽度 

了 人 到 
默认 图 块 高 度 Mac, Windows, Linux Chrome OS, Android 


[了 习 


图 2.65 开启 Chrome 浏 览 器 的 ApplicationCache 功 能 


示例 中 的 Manifest 文 件 application.Manifest 代 码 如 下 : 


CACHE MANIFEST 
# vl 

CACHE: 
demo.css 
demo.jpg 
demo.js 
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NETWORK: 
demo2.css 
FALLBACK: 


示 保 
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08 
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17 
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将 


页 面 代码 如 下 : 


<!1DOCTYPE html> 
<html Manifest="ApplicationCache/application.Manifest"> 

<!-- Manifest 文 件 -> 
<head> 
<script type="text/javascript" src="ApplicationCache/demo.js"></script> 
<link rel="stylesheet" type="text/css" href="ApplicationCache/ 
demo.css"> 
<link rel="stylesheet" type="text/css" href="ApplicationCache/ 
demo2.css"> 


</head> 
<body> 

<img src="ApplicationCache/demo.jpg"><br> 

<button> 更 新 缓存 Manifest 文 件 </button> <! 一 一 手动 更 新 缓存 按钮 一 一 > 
</body> 


<script type="text/javascript"> 
document .querySelector('button') .addEventListener('click',function() { 


// 监听 按钮 单 击 事件 


var appCache = window.applicationCache; // 获取 缓存 操作 对 象 
appCache.update() // 尝试 更 新 缓存 
if (appCache.status == window.applicationCache.UPDATEREADY) { 
// 状态 是 否 已 更 新 
appCache. swapCache (); // 更 新 成 功 后 ， 切 换 到 新 的 缓存 
} 
j 
</script> 
</html> 


Chrome 浏 览 器 访问 示例 页 


页 面 文件 部 署 在 配置 完毕 的 Apache 服 务 器 上 ， 使 用 开启 ApplicationCache 功 能 的 
， 同 时 打开 开发 者 工具 查看 控制 侣 信息， 效果 如 图 2.66 所 示 。 
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图 2.66 使 用 Chrome 浏 览 器 打开 ApplicationCache 示 例 
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在 开发 者 工具 的 控制 全 信息 中 ， 可 以 看 到 浏览 器 的 整个 执行 过 程 ， 首 先 下 载 html 标 签 中 
的 Manifest 属 性 对 应 的 Manifest 文 件 ， 然 后 将 Manifest 中 CACHE 标 签 下 的 文件 连同 主页 面 一 同 
进行 缓存 。 接 下 来 修改 demojs， 添 加 一 行 代码 如 下 : 


alert( ‘update’ ); 
再 更 新 application.Manifest 文 件 ， 将 第 二 行 的 v1 变 为 V2， 代 码 如 下 : 


CACHE MANIFEST 
# v2 

CACHE: 
demo.css 


demo.jpg 
demo.js 
NETWORK: 
demo2.css 
FALLBACK: 


单 击 页 面 “ 更 新 缓存 Manifest 文 件 ” 按 钮 ， 浏 览 器 启动 缓存 进程 更 新 CACHE 标 签 下 的 内 
容 ， 重 新 刷新 页 面 ， 待 页 面 加 载 完 毕 后 弹出 内 容 为 update 的 提示 框 ， 效 果 如 图 2.67 所 示 。 


Loculhost/Mpplicatiencs 天 


Sr 
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Appiicatiorcache, hm 
Application Cache Checking event Applicatiorcache, hin: 1 
Application Cache WoUpdate event YM] denc, js (996): 


BB, A © <wfnme>v ED | Emor Waning Log Debug 交 


图 2.67 重新 刷新 页 面 


在 Chrome 下 可 以 通过 访问 “chrome://appcache-internals/” 查 看 浏览 器 缓存 的 内 容 ， 本 节 
示例 的 缓存 信息 效果 如 图 2.68 所 示 。 


癌 MppCache Internals x 

€ FC Dohromne://appcache-internals 灾 @@ 局 三 
Manifest: http://localhost/ApplicationCache/application. manifest 
Renove Yiew Entries 


e Size: 33.4 kB 

。 Creation Time: 2013 年 9 月 20 日 星期 五 下 午 2:05:46 

。 Last Update Time: 2013 年 9 月 20 日 星期 五 下 午 2:05:46 
。 Last Access Time: 2013 年 9 月 20 日 星期 五 下 午 2:06:57 


图 2.68 示例 缓存 数据 内 容 
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[hr 
志 
上 


View Entries 链接 按钮 ， 展 开 被 缓存 的 地 址 链接 和 缓存 内 容 的 大 小 ， 效 果 如 图 2.69 所 示 。 


Time: 2013 年 9 月 20 日 星期 五 下 午 2:05:46 
ime: 2013 年 9 月 20 日 星期 五 下 午 2:05:46 
ime: 2013 年 9 月 20 日 星期 五 下 午 2:08:11 


图 2.69 单 击 View Entries 链 接 按钮 


| 罗 。 在 Firefox 中 可 以 通过 访问 abouticache 页 面 ( 在 [离线 缓存 设 置 ] 标题 下 ) 来 检查 离线 缓存 的 
上司 ” 当前 状况 。 


2.12 微 数据 


HTML 5 赋予 网 页 更 加 强大 的 语义 结构 ， 伴 随 着 丰富 的 标签 和 对 RDFA、 微 格式 、 微 数据 的 支 
持 ， 可 以 构建 出 更 加 有 价值 的 数据 驱动 型 的 Web。 相 较 于 RDFA 和 微 格式 ， 微 数据 是 HIML 5 推出 
的 最 新 的 一 种 语法 ， 并 且 得 到 了 搜索 引擎 之 王 Google 公 司 的 支持 。 微 数据 规范 了 以 标签 内 容 的 方 
式 来 描述 一 个 特定 类 型 的 信息 ， 如 个 人 信息 、 事 件 或 评论 ， 同 时 还 有 每 个 信息 类 型 描述 特定 类 型 
的 项 目 ， 如 事件 包含 场地 、 事 件 、 名 称 等 。 本 章 将 介绍 语义 化 的 相关 概念 和 发 展 历史 ， 了 解 微 数 
据 的 相关 使 用 方法 ， 最 后 通过 学 习 国 内 网 站 微 数据 的 应 用 ， 加 深 对 微 数据 的 理解 。 


2.12.1 语义 化 概念 


语义 化 是 前 端 开 发 中 的 专业 术语 ， 标 签 语义 化 有 助 于 构建 良好 的 HTML 结 构 ， 便 于 搜索 
引擎 搜索 和 抓 取 ， 同 时 还 有 利于 在 不 同 的 终端 设备 保持 显示 的 一 致 性 ， 拱 建 结构 清 晰 的 文 
档 ， 便 于 团队 开发 和 维护 。 

语义 化 的 关键 就 是 让 网 页 上 的 数据 和 信息 便于 机 器 理解 ， 提 高 网 站 的 易 用 性 ， 如 残障 人 
士 可 以 借助 于 机 器 识别 网 页 语义 结构 信息 ， 从 中 获取 网 页 关键 内 容 。 语 义 化 可 以 让 计算 机 对 
网 络 空间 存储 的 数据 进行 智能 化 的 分 析 评估 ， 计 算 机 可 以 像 人 脑 一 样 理解 信息 的 含义 ， 完 成 
智能 筛选 和 处 理工 作 。 语 义 化 形成 的 网 络 是 互联 网 的 延伸 ， 信 息 在 其 中 被 赋予 了 更 明确 的 含 
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义 ， 让 人 与 计算 机 之 间 能 更 好 地 协作 ， 使 得 互联 网 变 得 更 加 智能 。 原 本 只 有 人 类 能 够 理解 的 
信息 ， 通 过 语义 化 的 互联 网 数据 计算 机 也 能 在 一 定 程度 上 办 到 ， 网 络 从 此 有 能 力 提供 动态 和 
主动 的 服务 ， 如 对 餐饮 数据 的 理解 ， 计 算 机 原本 不 清楚 菜系 的 种 类 和 口味 ， 但 语义 化 的 意义 
就 在 于 将 相关 的 内 容 隐藏 在 页 面 的 结构 中 ， 告 诉 计算 机 哪些 文字 表示 菜系 ， 哪 些 表示 口味 。 

书写 语义 化 的 HTML 结 构 其 实 很 简单 ， 基 本 的 HTML 各 种 标签 就 包含 语义 信息 ， 如 div 表 
示 一 个 容器 、strong 表 示 强 调 、ul 和 1i 表 示 无 序列 表 等 。 在 书写 HTML 时 使 用 最 贴近 的 标签 来 
描述 内 容 ， 这 就 是 最 基本 的 语义 化 


2.12.2 Microdata 的 前 世 今生 


Microdata 即 为 微 数 据 ，Microdata 这 个 概念 最 早 由 HIML 5 规范 的 编辑 Ian Hickson 于 2009 
年 提出 ， 但 该 技术 的 出 现 之 前 已 经 历 了 多 年 的 发 展 变化 。 

微 数据 是 以 RDFA 为 基础 ， 采 用 HTML 形 式 放置 RDFA 的 一 种 方式 。RDFA 全 称 为 Resource 
Description Framework In Attributes， 中 文 意思 为 属性 方面 资源 描述 框架 。RDFA 在 2004 年 由 
Mark Birbeck 在 一 份 W3C 博 客 中 提 到 ， 后 来 这 个 概念 被 写 入 XHTML 的 版 本 中 ， 作 为 W3C 推 荐 
标准 。RDFA 扩 充 了 XHTML 的 几 个 属性 ， 开 发 者 可 以 利用 这 些 属 性 在 网 页 中 添加 机 器 可 识别 
的 元 数据 。RDFA 功 能 非常 强大 ， 但 在 使 用 时 涉及 到 复杂 的 属性 交互 ， 开 发 者 自身 都 很 难保 
证 RDFA 的 准确 性 ， 同 时 ， 由 于 继承 了 XML 的 部 分 功能 ， 在 命名 空间 上 容易 混淆 。 下 面 通过 
一 个 例子 了 解 RDFA 的 使 用 ， 首 先 给 出 没有 进行 RDFA 语 义 化 的 数据 ， 代 码 如 下 : 

<div> 

我 叫 李 三 ， 大 家 叫 我 小 三 。 我 微 博 是 : 
<a href="http://www.weibo.com">www. weibo.com</a>. 


我 住 上 海 市 ， 是 一 名 软件 工程 师 ， 就 职 于 Xx 科技 公司 。 


</div> 
将 上 面 的 结构 通过 RDFA 进 行 语义 优化 ， 优 化 后 的 代码 如 下 : 


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> 
我 叫 <span property="v:name"> 李 三 </span>， 
大 家 叫 我 <span property="v:nickname"> 小 三 </span>。 
我 微 博 是 : 
<a href="http://www. weibo.com" rel="Vv:url">www. weibo.com</a>。 
我 住 上 海 市 ， 是 一 名 <span property="v:title"> 软 件 工程 师 </span>， 
目 就 职 于 <span property="v:affiliation">XX 科 技 公 司 </span>。 

</div> 


Microformat 称 为 微 格式 ， 是 XHTML 中 另 一 版 本 的 结构 化 数据 ， 在 2005 年 的 超新星 大 会 
上 被 提出 ， 官 方 地 址 为 http://microformats.org/。 微 格式 的 出 现 重新 将 XHTML 一 些 原 有 属性 加 
以 应 用 ， 如 链接 上 的 ref 属 性 。 微 格式 的 发 展 受到 其 自身 缺点 的 限制 ， 没 有 一 套 统一 的 解析 方 
式 ， 繁 多 的 解析 器 限制 了 微 格式 的 发 展 。 通 过 一 个 例子 学 习 微 格式 的 使 用 ， 原 数据 结构 代码 
如 下 : 


<div> 
<img src="http://il.dpfile.com/s/i/default-avatar-s.png" /> 
<strong> 李 三 </strong> 
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Xx 科技 公司 软件 工程 师 

上 海 市 浦东 新 区 xxx 路 

邮编 : 200120 
</div> 


将 上 述 结构 通过 微 格式 进行 语义 优化 ， 代 码 如 下 : 


<div class="vcard"> 
<img class="photo" src="http://il.dpfile.com/s/i/default-avatar-s.png" /> 
<strong class="fn"> 李 三 </strong> 
<span class="org">XX 科 技 公司 </span><span class="title"> 软 件 工程 师 </span> 
<span class="adr"> 
<span class=" region"> 上 海 市 </span><span class="locality"> 浦 东 新 区 
</span> 
<span class="street-address">xxx 路 </span> 
邮编 : <span class="postal-code">200120</span> 
</span> 
</div> 


Microformat 之 后 出 现 的 就 是 本 章 所 介绍 的 Microdata 微 数据 ， 下 节 将 介绍 微 数据 的 相关 


使 用 。 


2.12.3 如 何 使 用 Microdata 优 化 网 页 


Microdata 的 所 有 信息 都 围绕 着 词汇 表 展 开 ， 词 汇 表 包含 了 描述 段落 或 文章 的 元 素 ， 但 是 


不 包含 事件 和 组 织 。 如 果 要 表示 事件 或 组 织 ， 就 需要 定义 自己 的 词汇 表 ，Microdata 允 许 自 定 


义 词汇 表 ， 并 将 其 使 用 在 自己 的 网 页 中 。 


用 


过 


Microdata 的 使 用 ， 会 用 到 以 下 属性 。 


。 itemid: 全 局 可 识别 的 标识 符 。 

。 itemprop: 数据 项 属性 ， 可 以 是 个 单词 或 是 个 URL。 

。 itemref; 允许 微 数据 项 通过 指向 特定 itemid 或 者 HTML 标 记 。 
。 itemscope: 声明 微 数据 词汇 表 的 作用 域 。 

。 itemtype: 声明 所 使 用 的 微 数据 词 汇 表 。 

下 面 是 一 段 没 有 使 用 微 数据 优化 过 的 HTML， 代 码 如 下 : 
<section> 


<h1> 李 三 </h1> 
<p><img src="http://il.dpfile.com/s/i/default-avatar-s.png" alt= 
"照片 "></p> 
<p><a href="http://www. weibo.com”> 微 博 </a></p> 
</section> 


在 上 述 示例 中 添加 微 数据 信息 ， 需 要 在 原 有 的 HTML 结 构 上 添加 一 些 属性 ， 首 先 声明 使 


的 Microdata 词 汇 表 的 命名 空间 ， 通 过 itemtype 属 性 完成 ， 另 外 声明 词汇 表 的 作用 范围 ， 通 
属性 itemscope 完 成 。 本 例 所 要 展现 的 是 一 个 人 的 个 人 信息 ， 这 里 将 使 用 词汇 表 http://data- 


vocabulary.org/Person 来 完成 ， 该 词汇 表 的 属性 如 表 2.25 所 示 。 
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表 2.25 http://data-vocabulary.org/Person 词 汇 表 属性 介绍 


name 名 字 
nickname 昵称 
photo 头像 地 址 

titile 职位 ， 如 工程 经 理 

role 角色 ， 如 工程 师 

Url 个 人 主页 

affiliation 与 该 人 相关 的 组 织 的 名 称 ， 如 雇主 信息 
friend 朋友 


示例 中 ， 所 有 的 元 素 都 典 套 在 section 元 素 中 ， 所 以 要 在 section 上 添加 itemtype 和 
itemscope， 代 码 如 下 : 


<section itemscope itemtype="http://data-vocabulary.org/Person"> 
[1 省 略 
</section> 
section 中 的 第 一 个 元 素 是 h1， 中 间 的 数据 为 用 户 的 名 字 ，hl 元 素 在 HTML 5 的 Microdata 
数据 模型 中 没有 特殊 的 处 理 ， 属 性 值 只 表示 相应 元 素 的 简单 文本 ， 所 以 在 做 微 数据 优化 时 要 
人 工 赋予 其 含义 ， 代 码 如 下 : 


<hl itemprop="name"> 李 三 </h1> 


读者 可 以 对 照 表 2.25 理 解 属性 name 的 含义 。 接 着 将 使 用 photo 属 性 ， 找 到 带 有 src 属 性 的 
ing 标签， 声明 img 元 素 的 photo 属 性 ， 代 码 如 下 ; 


<p><img itemprop="photo" src="http://il.dpfile.com/s/i/default-avatar- 
s.png" alt=" 照 片 ">></p> 
上 述 代码 语法 表示 这 里 是 “http://data-vocabulary.org/Person” 词 汇 表 中 的 一 个 photo 属 
性 ， 属 性 值 为 用 户 的 图 片 地 址 “http://il.dpfile.com/s/i/default-avatar-s.png”。 
最 后 要 添加 的 是 url 属 性 ， 代 码 如 下 : 


<a itemprop="url" href="http://www. weibo.com"> 微 博 </a> 


在 表 2.25 中 ，address 属 性 本 身 也 是 一 个 强大 词汇 表 ， 也 拥有 自己 的 相关 属性 ， 如 表 2.26 
所 示 。 


表 2.26 Address 词 汇 表 属 性 


属性 

Street-address 

locality 地 方 ( 例 如 ，1 个 城市 ) 
Tegion 地 区 区 域 

postal-code 邮政 编码 

country-name 国名 
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2.12.4 国内 网 站 如 何 使 用 Microdata 


在 国 


内 的 网 站 中 大 众 点 评 网 (http://www.dianping.com) 使 用 Microdata 的 时 间 比 较 早 ， 主 


要 用 于 显示 商户 的 评分 、 星 级 和 地 址 等 信息 。 


在 Microdata 的 支持 上 搜索 引擎 Google 最 为 出 色 ， 使 用 谷歌 搜索 信息 “上 海 初 花 ”， 如 图 


2.70 所 示 。 


Www dianping.com/shop/2032762 ~ 

次 训 丰 记 训 评分; 5 -7 662 条 评价 

上 海 褐 花 人 雪 价 阁 291 元 。 边 入 初 花 页 面 ,查看 更 多 关于 初 花 的 地 址 、 电 话 、 麻 单 、 价 格 、 
营业 时 间 介 插 , 了 解 初 花 最 新 的 折 加 估 志 券 、 用 户 点 评 信息 。 

全 部 图 片 - 烤 银 时 鱼 - 日 本 料理 - 王 昂 日 本 种 理 镀 板 并 


图 2.70 使 用 谷歌 搜索 “上海 初 花 ” 


可 以 看 到 图 中 箭头 所 指 区 域 的 内 容 ， 比 一 般 的 搜索 多 出 了 星 级 和 评价 数 ， 这 就 是 微 数据 
使 用 的 搜索 结果 。 通 过 使 用 谷歌 的 结构 化 数据 测试 工具 ， 查 看 谷歌 搜索 引擎 从 网 页 代码 中 抓 


取 了 哪些 信息 。 打 开 网 址 https://www.google.com.hk/webmasters/tools/richsnippets， 效 果 如 图 


2.71 所 示 


o 


goed Struct ute # 


¢ 


© Bhrtns://v. google. com. hk/vemasters/to0ls/richsnippers 


网 站 站 长 工具 


百 页 结构 化 数据 测试 工具 
结构 化 数据 测试 工具 Fi HIML 
结 档 化 雪 要 标记 助手 


图 2.71 谷歌 的 结构 化 数据 测试 工具 


在 页 面 网 址 文本 框 内 ， 输 入 之 前 搜索 的 大 众 点 评 网 商户 网 址 (http:/www.dianping.comy/ 
shop/2032762) 。 单 击 页 面 “ 预 览 ”按钮 ， 效 果 如 图 2.72 所 示 。 


图 cav svete ete x 
DC Bhttps:/ /rev. google eon. hl/vebnaet ors/tools/richenippets ?http4ANF Pr. ci 
省 结构 化 数据 测 二 工具 
针 构 化 笋 据 旬 试 工具 司 和 HIM 


殷 构 化 数 提 标记 助手 
hep dianping coryshop/2052762 


二: 


图 2.72 查看 大 众 点 评 网 商户 页 面 微 数据 信息 
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导航 。 从 “提取 的 结构 化 数据 ”一 栏 中 ， 可 以 看 到 被 提取 的 相关 词汇 表 ， 如 下 : 


。 http://data-vocabulary.org/review-aggregate: 评论 信息 。 

。 http://data-vocabulary.org/breadcrumb: “面包 悄 ” 信 息 。 
。 http://data-vocabulary.org/rating: 星 级 信息 。 

。 http://data-vocabulary.org/address: 商户 地 址 信息 。 


上 述 词汇 表 所 对 应 的 大 众 点 评 网 商户 页 面 信息 如 图 2.73 所 示 。 


上 海 督 厅 w 长 了 区 » 虹桥 日 本 日 本 料理 * 初 花 


[| 人 均 ¥291 ”口味 30 环境 29 服务 29 后 


长 二 区 虹桥 路 1446 号 古 北 湾 大 酒店 3 楼 ( 近 十 北 路 ) 
021-62958358 。 62080645 


全 部 10192 张 。 生 我 来 上 传 写 点 评 、 导 D4 只 开 团 提 岂 发 送 到 手机 ”修改 报 铺 


图 2.73 商户 页 面 上 的 语义 数据 


页 面 的 “预览 ”区 域 出 现 的 信息 比 之 前 的 更 加 丰富 ， 多 出 了 商户 相关 的 菜系 “面包 


届 ” 


读者 可 以 查看 页 面 对 应 区 域 源码 ， 了 解 网 页 如 何 提供 微 数 据 语义 功能 。 如 果 想 要 让 


的 网 站 在 搜索 引擎 上 拥有 更 强 的 搜索 表现 ， 快 快 将 微 数据 使 用 起 来 ， 武 装 自己 的 页 面 吧 。 


213 HTML 5 History 


可 以 使 用 的 History 相 关 属 性 和 方法 。 


。 length: 历史 堆栈 中 的 记录 数 。 
。 back: 返回 上 一 页 。 
。 forward(): 前 进 到 下 一 页 。 


为 后 退 。 


对 于 浏览 器 的 History 对 象 读者 一 定 并 不 陌生 ， 在 HTML 5 出 现 之 前 ， 开 发 者 就 能 使 用 其 
中 的 一 些 属 性 和 方法 ， 所 以 说 History 并 不 是 一 个 全 新 的 东西 ， 下 面 罗 列 了 HTML 5 出 现 之 前 


。 go: 前 进 或 后 退 到 指定 页 ， 如 果 不 写 或 者 为 0， 表 示 刷 新 当前 页 ; 正 数 为 前 进 ， 负 数 


通过 History 的 相关 属性 和 方法 可 以 了 解 到 ，History 主 要 提供 对 浏览 器 历史 记录 的 访问 功 
能 ， 让 用 户 在 历史 记录 中 自由 的 前 进 和 后 退 ， 而 在 HTML 5 中 ， 这 一 功能 得 到 了 加 强 ， 更 可 
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以 操作 历史 记录 中 的 数据 。 本 章 将 介绍 HTML 5 新 增 的 History 方 法 ， 并 介绍 相关 的 使 用 ， 最 


后 还 会 向 读者 介绍 JavaScript 中 的 MVC 框 架 ， 了 解 History 在 其 中 的 作用 。 


2.13.1 History API 介 绍 


HIML 5 给 History 新 增加 了 两 个 方法 ， 人 允许 开发 者 逐条 地 添加 和 修改 历史 记录 ， 方 法 如 下 。 


。 pushState: 在 历史 堆栈 的 顶部 添加 一 条 记录 ， 方 法 一 共 接 收 三 个 参数 ， 第 一 个 参数 为 
对 象 ， 会 在 出 发 页 面 的 popstate 事 件 时 ， 做 为 参数 的 state 属 性 传 入 到 事件 中 ; 第 二 个 
参数 为 页 面 的 标题 ， 第 三 个 参数 为 页 面 的 URL， 不 写 则 为 当前 页 面 。 

。 replaceState: 更 改 当前 页 面 的 历史 记录 ， 参 数 同 pushState 方 法 。 


浏览 器 


Chrome 


前 主流 浏览 器 对 HTML 5 History 的 支持 情况 如 表 2.27 所 示 。 


表 2.27 目前 主流 浏览 器 对 HTML 5 History 的 支持 情况 


支持 版 本 
8.0+ 


在 使 用 pushState 方 法 时 要 注意 ， 该 方法 会 改变 referrer 的 值 ， 如 果 新 创建 的 
XMLHttpRequest 对 象 在 这 个 方法 调用 后 使 用 并 发 送 请 求 ，HTTP 请 求 头 中 的 referrer 的 值 会 使 


下 


面 


这 个 值 ， 有 的 网 页 会 根据 referrer 来源) 来 校 验 页 面 的 安全 ， 这 里 读者 一 定 要 格外 注意 。 


通过 一 个 简单 的 示例 了 解 HTML 5 为 History 新 增 的 两 个 方法 的 使 用 ， 页 面 代码 如 下 : 


<!DOCTYPE html> 


<html> 
<body> 
<img/> <!-- 图 片 显示 区 --> 
<div> 
<a href="/" data-type='pre'> 上 一 张 </a> <!-- 上 一 张 按钮 --> 
<a href="/" data-type='next'> 下 一 张 </a> <!-- 下 一 张 按钮 --> 
</div> 
</body> 


<script type="text/javascript"> 
var products = [' 百 合 ', ' 枸 杞 ',' 桂 圆 干 ',' 罗汉 果 ', ' 三 七 花 ',' 雪 菊 ']; 
// 图 片 数 据 数组 


var img path = '/History/'; // 图 片 存放 路 径 

var current index = 0; // 当前 图 片 索引 

var root href = location.href; // 首次 页 面 加 载 地 址 
document .addEventListener('click',function (e) { // 监听 页 面 的 单 击 事件 


Var data type = e.target.getAttribute('data-type'); 
// 获取 触发 元 素 的 自 定义 属性 
Switch (data type){ 
case 'pre' : e.preventDefault(); switchImg(-1); break; 


// 执行 上 一 张 逻辑 
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US 


20 
2 
ppd 
2 
24 
25 
26 
2 
28 
29 


30 


3 


三 
33 


34 
35 


case 'next' : e-preventDefault() ;switchImg(1) ;7 break; 
// 执行 下 一 张 逻辑 
下 
DD); 
function switchImg (num) { // 用 户 选择 图 片 ， 并 使 用 HTML 5 History 
current index += num; // 调整 当前 的 图 片 索引 


if(current index < 0 ){ 
current index = products.length -1; 
}else if(current index >= products.length){ 
current index = 0 7 
Var current img = products[current index]; 
// 获取 选择 的 图 片 名 称 
history.pushstate (current img, current img, root href + '/'+ current_ 
img) ; // 修改 浏览 器 地 址 栏 
document .querySelector('img') .src = img _ path + current img +" .jpg'7 
// 设置 图 片 
] 7 
window.onload = function () { switchImg(0) 7 }; 
// 加 载 完 毕 后 自动 切换 到 第 一 张 图 
</script> 
</html> 


将 示例 代码 保存 至 html 文 件 内 ， 并 部 署 在 Web 服 务 器 ， 如 Apache、IIS 或 Nginx 等 ， 使 用 
Chrome 浏 览 器 访问 示例 ， 效 果 如 图 2.74 所 示 。 

访问 示例 ， 当 页 面 加 载 完 毕 后 ， 浏 览 器 重新 设置 URL 地 址 ， 是 因为 执行 了 第 33 行 代码 ， 
默认 将 图 片 数组 中 的 第 一 张 进行 展现 。 单 击 “ 下 一 张 ”按钮 ， 页 面 内 的 图 片 发 生变 化 ， 同 时 
浏览 器 的 URL 也 调整 为 对 应 图 片 名 字 ， 效 果 如 图 2.75 所 示 。 

用 户 如 果 要 退回 到 上 一 张 图 片 ， 可 以 单 击 “ 上 一 张 ”按钮 或 者 单 击 浏览 器 “ 回 退 ” 按 
钮 ， 执 行 的 效果 相同 ， 但 原理 上 有 区 别 。 单 击 “ 上 一 张 ”按钮 是 向 浏览 器 历史 堆栈 中 添加 数 


据 的 过 程 ， 每 次 单 击 都 会 被 记录 当中 ， 而 单 击 浏览 器 “ 回 退 ”按钮 ， 是 一 个 出 栈 的 过 程 ， 按 


照 后 进 先 出 的 原则 执行 。 


Ylocalhost/Nistory. Mta/f x 


€ 


© D1localhost/History.htn, 


图 2.74 打开 History 示 例 图 2.75 单 击 “下 一 张 ” 按 钮 


116 


LU。 第 2 章 HTML 5 的 整体 特性 


2.13.2 History 与 Hash 


Ajax 现今 已 被 所 有 前 端 开发 者 所 熟知 ， 可 以 在 不 刷新 当前 页 面 的 情况 下 更 新 页 面 上 部 分 
区 域 的 内 容 。 发 展 到 现在 ， 页 面 已 经 演变 出 Single Page Application 应 用 ， 即 单 页 面 应 用 ， 意 思 
是 原本 分 散在 多 张 页 面 的 功能 都 通过 一 张 页 面 来 展现 ， 常 见 的 单 页 面 应 用 如 Web 版 QQ 〈 地 址 
http://web2.qq.com/) ， 单 页 面 应 用 改变 了 传统 意识 中 的 一 个 页 面 对 应 一 个 URL 的 思维 ， 随 之 而 
来 的 是 页 面 功 能 对 应 与 某 个 URL 成 为 问题 ， 其 核心 点 是 如 何 创建 和 记录 每 次 Ajax 的 状态 。 

在 HTML 5 History 出 现 之 前 ， 要 记录 页 面 状 态 和 浏览 记录 只 能 通过 Hash 和 IFrame 两 种 方 
法 ， 其 中 IFrame 是 下 下 记录 浏览 状态 的 解决 方法 ， 下 面 将 介绍 两 种 方案 的 使 用 。 

大 家 知道 通常 来 说 浏览 器 的 记录 只 针对 于 URL 而 存在 ， 其 实 还 有 一 样 东西 也 能 被 浏览 器 
记录 ， 就 是 Hash， 即 跟 在 井 字 符号 “#” 后 面 的 内 容 。 当 修改 页 面 的 Hash 时 ， 不 会 造成 页 面 
的 重新 载 入 ， 比 如 说 页 面 执 行 Ajax 获 取 了 一 段 数据 ， 然 后 想 要 让 浏览 器 记录 这 个 过 程 ， 代 码 
可 能 会 像 下 面 这 样 写 : 

// 执行 ajax 获取 数据 

window.location.hash = '#data'; // 通过 hash 记 录 这 个 操作 

按照 上 述 代 码 操作 ， 浏 览 器 可 以 产生 一 条 记录 ， 但 问题 还 是 存在 ， 如 果 回 到 当前 页 面 ， 
浏览 器 仍然 以 URL 地 址 来 载 入 页 面 信息 ， 对 于 浏览 器 来 说 “# ”后 面 的 数据 data 只 用 来 描述 某 
个 区 域 ， 而 不 表示 执行 某 个 具体 的 业务 操作 ， 所 以 这 里 需要 增加 载 入 页 面 后 ， 抓 取 Hash 来 决 
定 具 体 的 操作 页 面 ， 代 码 如 下 : 


window.onload = function (){ // 监听 页 面 资源 加 载 完 毕 事件 
var hash = window.location.hash; 
if( hash == '#data'){ 


// 执行 对 应 的 ajax 逻辑 获取 数据 
}; 

1 

问题 并 没有 就 这 样 轻松 地 被 解决 ， 还 有 一 种 情况 不 会 触发 页 面 的 load 事 件 ， 当 前 页 面 的 
两 个 锚 点 之 间 进 行 切换 时 ， 如 “demo.html#datal ” 跳 转 到 “demo.html#data2”， 对 于 这 种 情 
况 ， 有 些 比较 新 的 浏览 器 可 以 监听 Hash 值 的 变化 ， 拥 有 hashchange 事 件 ， 支 持 的 浏览 器 有 IE 
8+、Firefox 3.6+、Opera 10.6+、Safari 5.0+、Chrome 5.0+。 还 有 一 些 较 旧 的 浏览 器 不 支持 该 
事件 ， 只 能 通过 不 停 地 检查 hash 值 判断 是 否 发 生变 化 ， 修 改 后 的 代码 如 下 : 


01 function loadData(){ // 根据 hash 获 取 对 应 数据 

02 Var hash = window.location.hash; 

03 if( hash == "#data')1{ 

04 // 执行 对 应 的 Ajax 逻辑 获取 数据 

05 }706 ] 7 

07 window.onload = function (){ // 监听 页 面 资 源 加 载 “ 完 毕 ”事件 

08 Var hash = "''; 

09 loadData(); 

10 if ("onhashchange” in window) { // 判断 浏览 器 是 否 支 持 hashchange 事 件 
window.onhashchange = loadData; 

TI } else { 

3 setInterval (function(){ // 轮 询 检查 hash 变 化 
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14 if (window.location.hash == recentHash) { 
// hash 没有 任何 变化 则 返回 
15 return; 
16 Em 
1 hash = window.location.hash; // 记录 最 新 hash 值 
18 loadData(); // 执行 Ajax 方 法 获取 数据 
19 }, 1000); 
20 } 
2 


上 面 的 方法 看 上 去 非常 完美 ， 但 遇 到 头疼 的 下 还 是 没 辐 ，IE 6 和 IE 7 版 本 不 会 将 Hash 的 
变化 记录 到 浏览 器 历史 中 ， 一 种 URL 的 页 面 只 会 有 一 笔记 录 。 这 里 就 需要 用 到 之 前 提 到 的 
IFrame， 由 于 IFrame 拥 有 自己 的 URL， 所 以 下 会 将 其 URL 变 化 记录 到 浏览 器 的 记录 中 。 解 决 
方案 就 是 ， 在 页 面 中 动态 插入 一 个 隐藏 的 IFrame， 同 时 结合 之 前 的 Hash 进 行 浏览 器 的 历史 记 
录 ， 最 终 修改 的 代码 如 下 : 


01 var hash; 
02 window.onload = function() { 


过 


03 hash = window.location.hash; 
04 Var iframe = document.createElement ('iframe'); 
// 创建 IFrame 元 素 
05 iframe.style.display = 'none'; // 设置 样式 为 不 显示 
06 iframe.src = 'javascript:void(0);'; 
07 document .body.appendChild (iframe); // 插入 dom 结 构 
08 varn iframe doc = iframe.contentWindow.document; 
// 获取 IFrame 内 部 文档 对 象 
09 iframe_doc.open(); // 打开 一 个 新 文档 ， 并 清空 当前 文档 
10 iframe doc.close(); // 关闭 文档 
I iframe doc.location.hash = hash; // 设置 文档 hash 值 
12 loadData (); 
13 setInterval (function(){ // 轮 询 监听 IFrame 的 hash 变 化 
14 Var current hash = iframe.location.hash; 
// 获取 iframe hash 值 
5 if(current hash != hash) { 
16 location.hash = current hash; 
// 设置 当前 文档 hash 值 
i hash = current hash; 
18 i 
19 loadData (); 
20 }, 1000); 
2 
22 function loadData(){ // 根据 hash 获 取 对 应 数据 
23 Var hash = window.location.hash; 
24 if( hash == '#data'){ 
25 // 执行 对 应 的 Ajax 逻辑 获取 数据 
26 }; 
WE 


使 用 IFrame 的 处 理 方式 与 单纯 使 用 Hash 的 方式 差异 不 大 ， 只 增加 了 一 个 用 于 存储 Hash 变 
化 的 隐藏 Frame 元 素 ， 通 过 改变 IFrame 的 src 属 性 强行 将 历史 记录 推 入 下 的 浏览 记录 中 。 


U 
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直到 HTML 5 的 出 现 ， 终 于 有 了 统一 的 技术 方案 解决 这 一 问题 ， 如 果 开 发 的 应 
要 兼容 低 版 本 的 浏览 器 ， 可 以 借助 于 第 三 方 的 类 库 ， 如 Historyjs， 项 目地 


com/balupton/History.js， 该 类 库 的 API 风 格 完全 与 HTML 5 的 History 相 同 


库 简 化 日 常 的 业务 开发 。 


2.13.3 什么 是 MVC 


上 为 https://github. 
， 读 者 可 以 通过 该 类 


MVC 全 称 Model View Controller。Model 代 表 模 型 ，View 代 表 视 图 ，Controller 代 表 控 制 


器 ， 是 软件 工程 中 一 种 设计 模式 ， 最 早 由 Trygve Reenskaug 在 1978 年 提出 
码 维护 ， 增 强 代码 的 扩展 性 ， 使 得 代码 结构 变 得 清晰 ， 同 时 一 部 分 功能 可 以 被 本 


。 图 2.76 为 MVC 通 用 的 框架 结构 。 


图 2.76 MVC 通 用 的 框架 结构 


MVC 的 三 个 层次 分 别 起 着 不 同 的 作用 ， 说 明 如 下 。 


。 Model (模型 ) : 用 户 封装 与 业务 相关 的 数据 和 数据 的 处 理 方法 。 


。 View (视图 ) : 用 于 处 理 和 实现 数据 的 显示 逻辑 。 


。 Controller (控制 器 ) : 协调 模型 和 视图 层 ， 控 制程 序 的 流程 。 


MVC 之 所 以 经 久 不 衰 ， 是 因为 具备 了 以 下 优点 。 


上 。MVC 可 以 简化 代 
E 复 进行 利 


。 低 耦 合 : 视图 层 从 业务 逻辑 中 分 离 ， 改 变 显 示 的 状况 。 不 需要 调整 模型 层 和 控制 器 
的 代码 ， 同 样 ， 如 果 要 对 底层 数据 进行 业务 变化 ， 只 需要 调整 模型 层 ， 如 一 项 应 用 


的 多 数据 库 支持 ， 只 需要 给 模型 层 添加 一 个 适配器 即 可 。 


。 重用 性 高 : 比如 时 下 移动 互联 网 兴起 ， 很 多 网 站 需要 开发 一 套 可 以 同时 支持 多 种 终 
端 设备 的 程序 ， 使 用 MVC 可 以 让 多 个 视图 层 相互 独立 ， 页 面 与 后 端的 服务 相互 分 
离 ， 模 型 层 和 控制 器 不 需要 进行 任何 的 改变 ， 可 最 大 化 的 将 代码 进行 重用 。 


。 维护 成 本 低 。 


。 分 工 明确 ， 开 发 高 效 : 将 站 点 的 开发 分 成 不 同 的 工作 ， 前 端 工程 师 负 责 HTML 和 


CSS， 后 端 Java 工 程 师 负 责 产品 业务 逻辑 。 


2.13.4 主流 MVC 框 架 介绍 


MVC 这 种 设计 模式 没有 特定 的 形态 ， 以 往 经 常 出 现 的 后 端 


C# 等 。 随 着 前 端的 发 展 ， 单 页 面 应 用 的 兴起 ， 如 Gmail， 前 端 页 
后 端的 逻辑 已 经 前 置 化 ， 这 时 候 唯 有 MVC 才 能 解决 这 种 问题 。 


发 的 业务 


ph， 如 使 


Java、 


自 的 逻辑 越 来 越 复 杂 ， 很 多 
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在 JavaScript 的 MVC 框 架 中 ， 最 为 出 名 的 莫 过 于 Backbone.js， 体 积 非 常 的 小 ， 压 缩 后 只 
有 5KB 左 右 ， 官 方 网 站 为 http://backbonejs.org/，Backbone.js 在 国内 也 得 到 了 很 多 网 站 的 广 
泛 应 用 ， 如 比较 著名 的 豆瓣 说 。 另 外 还 有 一 批 功 能 全 面 不 过 体积 较 大 的 前 端 MVC 框 架 ， 如 
Knockout.js 和 Ember.js。Knockout.js 还 提出 了 MVC 的 一 种 变异 体 ， 叫 做 MVVM， 即 Model- 
View-ViewModel 的 缩写 。 最 近 备 受 关注 的 应 该 是 Angularjs， 网 址 为 http://angularjs.org/， 下 载 
页 面 如 图 2.77 所 示 。 


网 NcuLARJS 
w Google- 


HTML enhanced for web apps! 2 
四 View on GitHub 


[uv meansm 国 -1 国 se 


图 2.77 Angularjs 下 载 页 面 


每 种 MVC 框 架 都 有 自己 的 特点 ， 声 明 绑 定 、 路 由 等 等 功能 已 经 成 为 MVC 框 架 的 标 配 ， 
读者 有 兴趣 可 以 前 往 站 点 http://todomvc.com/， 里 面 列 举 了 目前 市 面 上 拥有 的 所 有 JavaScript 
MVC 框 架 ， 同 时 还 提供 了 一 些 周 边 的 类 库 供 组 合 选择 。 


2.14 选择 器 


在 HTML 5 出 现 之 前 使 用 JavaScript 查 找 DOM 元 素 ， 原 生 方法 有 以 下 三 种 。 


。 getElementById: 根据 指定 元 素 的 id 属性 返回 元 素 。 
。 getElementsByName: 返回 所 有 指定 name 属 性 的 元 素 。 
。 getElementsByTagName: 返回 所 有 指定 标签 的 元 素 。 


在 日 常 的 开发 中 ， 往 往 需要 更 多 复杂 的 查询 方式 ， 如 获取 某 种 class 类 名 相同 的 元 素 、 
获取 元 素 的 指定 子 元 素 、 获 取 带 有 某 种 自 定义 属性 的 元 素 。HIML 5 新 增 了 解决 上 述 问题 的 
JavaScript 选 择 器 ， 可 以 更 加 精准 地 定位 查询 元 素 ， 而 不 需要 通过 层 层 遍历 筛选 。 新 增 的 选择 
器 支持 与 CSS 相 符 的 规则 ， 方 法 共有 两 种 。 
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。 querySelector: 根据 选择 器 规则 返回 第 一 个 符合 要 求 的 元 素 。 
。 querySelectorAll: 根据 选择 器 规则 返回 所 有 符合 要 求 的 元 素 。 


新 的 HTML 5 JavaScript 选 择 器 接口 得 到 了 IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 
4.0+、Opera 10.1+ 浏 览 器 的 支持 。 

本 章 将 介绍 新 增 的 HTML 5 JavaScript 选 择 器 ， 同 时 例 举目 前 常用 的 选择 器 方法 ， 最 后 通 
过 查找 DOM 元 素 的 实例 掌握 实际 用 法 。 


2.14.1 选择 器 分 类 


本 节 介绍 的 内 容 除了 包含 常用 开发 中 的 选择 方式 外 ， 还 会 介绍 部 分 增强 选择 的 方式 ， 以 
便 读者 能 够 全 面 了 解 选 择 器 的 使 用 。 


1. ID 选择 器 

使 用 上 D 选 择 器 时 ， 需 要 在 前 面 添加 “#”， 同 时 选择 器 区 分 大 小 写 ， 语 法 如 下 : 

document .querySelector ('#id'); // 等 同 于 document. getElementById('id') 
2. 元 素 选择 器 


元 素 选 择 器 通过 指定 的 标签 查询 元 素 ， 此 时 querySelectorAll 等 同 于 
getElemlentsByTagName， 语 法 如 下 : 


document. querySelectorAll('a') // 获取 页 面 上 所 有 a 元 素 并 返回 列表 

3. 样式 类 选择 器 

使 用 元 素 的 样式 类 获取 一 个 或 一 类 元 素 ， 样 式 名 字 前 使 用 “.”〔 英 文句 号 ) 开头 ， 语 法 如 下 : 
document. querySelectorAll('.btn') // 获取 所 有 样式 类 中 包含 btn 类 名 的 元 素 
4. 分 组 选择 器 


使 用 querySelectorAll 不 仅 可 以 获取 一 类 相关 的 元 素 ， 同 时 还 允许 获取 其 他 类 别 元 素 ， 两 
种 类 型 之 间 使 用 逗号 隔 开 ， 语 法 如 下 ; 


document querySelectorAll('a,p'); 
// 获取 页 面 上 所 有 a 元 素 和 p 元 素 ， 并 通过 一 个 列表 返回 
document. querySelectorAll('.btn, .txt') 7 


// 获取 页 面 上 所 有 包含 btn 和 txt 样 式 类 名 的 元 素 


5. 属性 选择 器 
获取 页 面 上 包含 指定 属性 的 元 素 ， 属 性 名 称 可 以 是 元 素 原生 属性 和 用 户 自 定义 属性 ， 语 
法 如 下 : 


document. querySelectorAll ('a[ltarget=" blank"]') 
// 获取 页 面 上 所 有 target 属 性 为 blank 的 a 元 素 
document. querySelectorAll ('img[data-id]') 


// 获取 页 面 上 所 有 带 有 自 定义 属性 data-id 的 img 元 素 
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6. 后 代 选 择 器 


主要 用 于 选择 作为 某 元 素 后 代 的 元 素 ， 规 则 左边 的 选择 器 一 端 包 括 两 个 或 多 个 用 空格 分 
隔 的 选择 器 ， 如 div a 可 以 解释 为 查找 所 有 被 div 包 围 的 所 有 a 元 素 ， 语 法 如 下 : 


document. querySelectorAll ('div a') // 获取 页 面 上 所 有 被 div 包 含 的 a 元 素 
document. querySelectorAll ('div .btn') 


// 获取 页 面 上 所 有 被 div 包 含 的 带 有 btn 样 式 类 名 的 元 素 
7. 子 元 素 选择 器 


后 代 选 择 器 会 将 元 素 底下 的 所 有 相关 元 素 都 搜索 出 来 ， 如 果 使 用 者 想 进一步 缩小 范围 ， 
可 以 使 用 子 元 素 选择 器 ， 只 会 选择 某 个 元 素 的 一 级 子 元 素 ， 子 元 素 用 “>” (大 于 号 ) 表 
示 ， 代 码 如 下 : 


<html> 
<div id="'first'> 
<div></div> 
<div></div> 
</div> 
<html> 
<script> 
document. querySelectorAll ('html>div') // 只 返回 一 个 id 为 first 的 div 元 素 
</script> 


8. 相 邻 兄弟 选择 器 


选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 二 者 有 相同 的 父 元 素 ， 相 邻 兄弟 选择 器 使 用 
“+”《 加 号 ) ， 该 种 选择 器 的 使 用 相对 较 少 ， 读 者 可 以 适当 掌握 ， 代 码 如 下 : 


<div> 
<div></div> 
<div></div> 

</div> 

<p id="pl"></p> 

<p id="p2"></p> 


<script> 

document. querySelectorAll ('div+p') // 只 返回 一 个 id 为 pl 的 pb 元素 
</script> 

9. 伪 类 选择 器 

这 里 介绍 其 中 一 种 伪 类 选择 器 “:first-child” 表 示 选 择 元 素 的 第 一 个 子 元 素 ， 代 码 如 下 : 
<div> 


<p id="pl"></p> 
<p id="p2"></p> 
</div> 
<script> 
document. querySelectorAll ('p:first-child') // 只 返回 一 个 id 为 p1 的 p 元 素 
</script> 
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类 似 的 伪 类 选择 器 还 有 “:last-child”、“:nth-child” 等 。 除 了 上 述说 的 9 种 选择 方法 外 ， 
其 实 还 有 很 多 其 他 更 高 级 的 选择 器 使 用 方法 ， 极 大 方便 了 日 常 的 开发 工作 ， 使 得 原本 在 DOM 
中 寻找 元 素 的 工作 变 得 更 加 容易 。 


二 
[ 民 " 


更 多 的 选择 器 使 用 可 以 参考 jQuery 的 文档 ， 地 址 为 http://apijquery.com/category/selectors/。 


2.14.2 使 用 选择 器 操作 页 面 中 的 元 素 


示例 代码 见 光盘 中 的 querySelector.htm 文 件 ， 使 用 Chrome 浏 览 器 打开 文件 ， 效 果 如 图 2.78 


所 示 。 
选中 “篮球 ”、“ 游 泳 ” 复 选 框 ， 单 击 “ 获 取 ” 按 钮 ， 脚 本 从 复 选 框 中 筛选 出 选中 数据 
并 输出 ， 效 果 如 图 2.79 所 示 。 
兴趣 爱好 : 兴趣 爱好 : 篮球 , 游泳 
厂 篮 球 厂 游 泳 三 唱歌 三 桌 游 区 篮球 书 游泳 所 唱歌 三 桌 六 
| CE 
图 2.78 querySelector.htm 文 件 效果 图 2.79 选中 数据 并 单 击 “ 获 取 ” 按 钮 
示例 页 面 代 码 如 下 : 
01 <!DOCTYPE html> 
02 <html> 
03 <body> 
04 <h2> 兴 趣 爱 好 : <label></1label></h2> <!-- 信息 输入 标签 --> 
05 <input type="checkbox" id="cl"></input><label for="cl"> 篮 球 
</1label> <!-- 复 选 框 列表 --> 
06 <input type="checkbox" id="c2"></input><label for="c2"> 游 泳 
</label> 
07 <input type="checkbox" id="c3"></input><label for="c3"> 唱 歌 
</label> 
08 <input type="checkbox" id="c4"></input><label for="c4"> 桌 游 
</label> 
09 <br><br> 
10 <button> 获 取 </button> <!-- 获取 按钮 --> 
11 </body> 
12 <SCript> 
13 document .querYySelector ('button') .addEventListener('click',function(e){ 
// 监听 获取 按钮 单 击 事件 
14 e.preventDefault (); // 组 织 按 钮 默认 事件 
a Var checked = document .querySelectorAll('input:checked'), 
// 获取 所 有 选中 复 选 框 
16 results = []; // 结果 数组 
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1 7 checked = Array.prototype.slice.call (checked); 
// 将 元 素 列表 转 为 数组 

18 checked.forEach (function (item){ // 循环 数组 获取 选中 数值 

19 var id = item.getAttribute('id'), // 获取 复 选 框 ia 

20 label = document .querySelector ('Label[for="' + id 
En // 根据 id 获取 对 应 labe1 元 素 

2 results.push (label .innerHTML); // 将 数值 推 入 数组 

22 1); 

Fk) document .querySelector('h2 > label') .innerHTML = 
results.join(','); // 设置 显示 标签 内 容 

240 4) 

25 </script> 

26 </html> 


示例 在 第 13、15、20、23 行 分 别 使 用 了 元 素 选 择 器 、 伪 类 选择 器 、 属 性 选择 器 和 子 元 素 


选择 器 。 


2.15 CSS 3 特性 


CSS 随 着 Web 2.0 的 出 现 和 发 展 ， 以 往 的 特性 和 标准 已 经 无 法 完全 满足 现今 的 交互 和 需 


求 ， 开 发 者 需要 更 强 的 字体 选择 、 更 方便 的 阴影 渐变 、 更 简 音 


的 图 形 动画 。 随 之 而 来 的 就 是 


CSS 3 的 到 来 ， 在 不 需要 改变 原 有 设计 结构 的 情况 下 ， 就 可 以 使 用 最 新 的 特性 ， 做 到 了 良好 
的 向 后 兼容 。 不 过 目前 支持 的 浏览 器 还 是 有 限 的 ， 很 大 一 部 分 新 功能 在 使 用 时 都 需要 添加 济 
览 器 前 缀 ， 给 开发 使 用 带 来 了 一 定 困难 。 本 章 将 从 开放 字体 格式 、 背 景 、 文 字 效果 、 边 框 、 


用 户 界面 、 多 列 、 转 换 和 过 渡 8 个 性 能 点 来 介绍 CSS 3 。 


2.15.1 CSS 3 带 来 了 什么 


CSS 3 让 原 有 的 网 站 更 加 趣味 嚼 然 ， 很 多 站 点 都 给 自己 的 网 站 页 面 添加 了 各 种 酷 炫 的 CSS 
3 效果 ， 让 网 站 变 得 更 加 吸引 人 ， 如 大 众 点 评 网 的 十 周年 活动 页 面 ， 效 果 如 图 2.80 所 示 。 


图 2.80 箭 头 所 指 区 域 均 使 用 了 CSS 3 的 动画 效果 ， 用 到 了 


“@keyframes” 和 animation 样 式 


功能 ， 读 者 可 以 继续 向 下 滚动 页 面 查看 更 多 的 CSS 3 动画 效果 。 
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图 2.80 大 众 点 评 网 的 十 周年 活动 页 面 


2.15.2 开放 字体 格式 (WOFF) 


开放 字体 格式 (WOFF) ， 英 文 全 称 Web Open Font Format。 是 由 Mozilla、Type Supply、 
LettError 和 其 他 组 织 协 力 开发 的 全 新 网 络 字 型 格式 。WOFF 包 含 了 基于 SFNT 的 字体 (如 
PostScript、TrueType、OpenType、WOFF) ， 字 体 均 经 过 WOFF 的 编码 工具 压缩 ， 以 便 典 入 
网 页 中 ， 并 使 用 zlib 压 缩 ， 文 件 一 般 比 TTF/ 小 40%。 

使 用 WOFF 可 以 通过 CSS 3 的 @font-face 属 性 ， 运 作 方 式 与 OpenType 和 TrueType 字 体 相 
同 ， 表 2.28 列 举 了 目前 主流 浏览 器 的 支持 情况 。 


表 2.28 主流 浏览 器 的 “@font-face” 支 持 情况 


浏览 器 支持 版 本 


@font-face 语 法 规则 如 下 : 


Q@font-face { 
font-family: < 开放 字体 格式 名 >; 
src: < 字体 路 径 > [< 字体 格式 >] [, < 字体 路 径 > [< 字体 格式 >] ] *; 
[font-weight: < 是 否 粗 体 >] ; 
[font-style: < 字体 样式 >] ; 
} 


“@font-face” 属 性 的 使 用 目前 仍然 受到 浏览 器 的 限制 ， 不 同 浏览 器 的 支持 情况 各 不 相 
同 ， 下 面 列举 了 目前 常用 字体 的 支持 情况 。 
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1. TrueType 格 式 


该 字体 格式 文件 以 tt 为 后 级 ， 是 操作 系统 Windows 和 Mac 上 比较 常见 的 字体 格式 ， 目 前 支 
持 的 浏览 器 有 IE 9+、Firefox 3.5+、Chrome 4+、Safari 3+、Operal0+。 


2. OpenType 格 式 


该 字体 格式 文件 以 ot 为 后 经 ， 内 置 于 TrueType 格 式 基础 之 上 ， 是 一 种 原始 的 字体 格式 ， 
提供 了 比 TrueType 格 式 更 多 的 功能 ， 目 前 支持 的 浏览 器 有 Firefox 3.5+、Chrome 4.0+、Safari 
3.1、Operal10.0+。 


3. Web Open Font Format 格 式 


该 字体 格式 文件 以 woff 为 后 经， 是 一 个 开放 的 TrueType 和 OpenType 的 压缩 版 本 ， 同 时 
支持 元 数据 包 的 分 离 ， 被 认为 是 目前 Web 字 体 中 的 最 佳 格式 ， 目 前 支持 的 浏览 器 有 IE 9+、 
Firefox 3.5+、Chrome 6+、Safari 3.6+、Operall.1+。 


4. Embedded Open Type 格 式 


该 字体 格式 文件 以 eot 为 后 缀 ， 可 以 从 TrueType 格 式 中 创建 字体 ， 是 下 下 专用 字体 ,，IE 4 
以 上 的 浏览 器 支持 。 


5. SVG 格式 


该 字体 格式 文件 以 svg 为 后 缀 ， 是 基于 SVG 矢量 泻 染 的 字体 格式 ， 目 前 支持 的 浏览 器 有 
Chrome 4+、Safari 3.1+、Opera 10.0+。 
为 了 让 更 多 的 浏览 器 支持 “@font-face”， 可 以 使 用 以 下 语法 格式 书写 : 


@font-face { 
font-family: 字体 名 称 ; 
src: url(' 字 体 文件 名 .eot'); /* IE9 Compat Modes */ 
ae url(' 字 体 文件 名 .eot?#iefix') format ('embedded-opentype'), 
We TREC-TE A 
url(' 字 体 文件 名 .woff') format('woff')， /* 支持 WoFF 的 浏览 器 */ 
url(' 字 体 文件 名 .ttf') format('truetype'),/* safari, Android, i0s */ 
url(' 字 体 文件 名 .svg# 字 体 文件 名 ') format('svg'); /* Legacy i0s 版 本 */ 


上 
下 面 通过 一 个 示例 介绍 “@font-face” 的 实际 使 用 情况 ， 代 码 如 下 : 


01 <!DOCTYPE html> 

02 <html> 

03 <style type="text/css"> 
04 @font-face { 


05 font-family: 'jackrunnerfreeregular'; /* 字体 名 称 */ 
06 src: url('font-face/alterdeco-jackrunner-webfont .eot'); 
/* IE9 Compat Modes */ 
07 src: url('font-face/alterdeco-jackrunner-webfont .eot?#iefix') 
format ('embedded-opentype'), /* IE6-IE8 */ 
08 url('font-face/alterdeco-jackrunner-webfont .woff') 
format ('woff'), /* 支持 WoFF 的 浏览 器 */ 
09 url('font-face/alterdeco-jackrunner-webfont .ttf') 
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format ('truetype'), /* Safari, Android, iOs */ 


10 url('font-face/alterdeco-jackrunner-webfont. 
svg#jackrunnerfreeregular') format('svg'); 

1 font-weight: 100%; 

LZ font-style: normal; 

be ws 

14 bodyf{ 

1 font-family: 'jackrunnerfreeregular'; Vs 页 面 字体 大 

16 font-size: 100px; /* 字体 大 小 */ 

了 二 


18 </style> 
19 <body>H T M 工 5</h1></body> 
20 </html> 


[GA 


Chrome 浏 览 器 打开 font-face.htm 示 例文 件 ， 字 体 效果 如 图 2.81 所 示 。 


HTMLS 


图 2.81 字体 效果 


http://www.fontsquirrel.com/tools/webfont-generator 网 站 可 以 对 字体 文件 进行 转换 ， 并 导出 各 种 
字体 格式 版 本 ， 本 示例 的 字体 文件 也 是 通过 该 网 站 处 理 得 到 。 另 外 ， 想 获取 更 多 的 字体 可 以 
前 往 站 点 http://www.dafont.com/。 


2.15.3 背景 (Backgrounds) 


在 CSS 2.1 中 background 属 性 已 经 出 现 ， 并 且 拥 有 以 下 5 个 属性 。 


background-color: 背景 色 。 

background-image: 背景 图 片 地 址 ， 相 对 或 者 绝对 位 置 。 

background-repeat: 是 否 及 如 何 重复 背景 图 像 ， 默 认为 repeat 表 示 图 像 将 在 重 直 方向 和 
水 平方 向 重复 。 

background-attachment: 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 ， 默 认为 
scroll， 表 示 随 着 页 面 的 其 余部 分 滚动 。 

background-position: 背景 图 像 的 起 始 位 置 。 


在 CSS 3 中 又 给 background 添 加 了 三 种 属性 ， 下 面 分 别 介绍 。 


Ws 


background-origin 


于 设置 或 检索 对 象 的 背景 图 像 计算 background-position 时 的 参考 原点 位置) ， 共 有 三 


种 可 选 值 ， 分 别 为 padding-box 表 示 从 padding 区 域 ( 含 padding〉 开 始 显示 背景 图 像 ，border- 
box 表 示 从 border 区 域 ( 含 border) 开始 显示 背景 图 像 ，content-box 表 示 从 content 区 域 开 始 显示 
图 像 。 


起 旦 
月 未 
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通过 background-origin 示 例 比 较 三 种 属性 ， 使 用 Chrome 浏 览 器 打开 backgound-origin.htm 
文件 ， 效 果 如 图 2.82 所 示 。 


content-box padding-box border-box 
HL 5:HmL S 
HL 5:HmL 5; 8 


图 2.82 background-origin 示 例 效 果 题 


2. background-clip 


于 指定 对 象 的 背景 图 像 向 外 裁剪 的 区 域 ， 同 样 ， 也 具有 三 种 可 选 值 ， 分 别 为 Padding- 
box 表 示 从 padding 区 域 (不 含 padding) 开始 向 外 裁剪 背景 ，border-box 表 示 从 border 区 域 (不 
含 border) 开始 向 外 裁剪 背景 ，content-box 表 示 从 content 区 域 开始 向 外 裁剪 背景 。 

通过 background-clip 示 例 比较 三 种 属性 ， 使 用 Chrome 浏 览 器 打开 backgound-clip.htm 文 
件 ， 效 果 如 图 2.83 所 示 。 


content-box padding-box border-box 

[| 

i | ee Ws 
mannomoon 人 nl 


图 2.83 background-clip 示 例 效 果 题 


3. background-size 

于 检索 或 设置 对 象 的 背景 图 像 的 尺寸 大 小 ， 人 允许 用 长 度 或 者 百分比 指定 背景 图 片 
大 小 ， 不 允许 使 用 负 值 。 通 过 background-size 示 例 比 较 各 种 写法 ， 使 用 Chrome 浏 览 器 打开 
backgound-size.htm 文 件 ， 效 果 如 图 2.84 所 示 。 


宽度 百分比 cover contain 


图 2.84 background-size 示 例 效果 


另外 ，CSS 3 还 支持 了 Multiple backgrounds， 即 多 重 背 景 图 象 ， 可 以 把 不 同 背 景 图 象 只 放 
到 一 个 块 元 素 里 。 多 个 图 片 URL 之 间 使 用 逗号 隔 开 ， 如 果 有 多 个 背景 图 片 ， 而 其 他 属性 只 有 
一 个 (例如 background-repeat 只 有 一 个 ) ， 表 明 所 有 背景 图 片 应 用 该 属性 值 。 通 过 的 Multiple 
backgrounds.htm 示 例 学 习 如 何 使 用 ， 效 果 如 图 2.85 所 示 。 
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图 2.85 Multiple backgrounds 使 用 效果 


2.15.4 文字 效果 (Text Effects ) 


CSS 3 对 文字 也 增加 了 多 种 效果 ， 下 面 将 介绍 其 中 的 4 种 效果 。 


1. text-shadow 


设置 或 检索 对 象 中 文本 的 文字 是 否 有 阴影 及 模糊 效果 ， 语 法 如 下 : 


text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或 none | 
oooOry [7 <oobor> ls 


通过 text-shadow 示 例 查 看 使 用 效果 ， 使 用 Chrome 浏 览 器 打开 text-shadow.htm 文 件 ， 效 果 


如 图 2.86 所 示 。 


2. text-overflow 
于 设置 或 检索 是 否 使 


HTMEL GS 


图 2.86 text-shadow 示 例 效 果 


个 省 略 标记 “..….” 表 示 对 象 内 文本 的 溢出 ， 语 法 如 下 : 


text-overflow : clip | ellipsis 


。 clip: 不 显示 省 略 标记 “.…”， 而 是 简单 的 裁 切 。 
。 ellipsis: 当 对 象 内 文本 溢出 时 显示 省 略 标 记 “...”。 


通过 text-overflow 示 例 查看 使 用 效果 ， 使 用 Chrome 浏 览 器 打开 text-overflow.htm 文 件 ， 效 


果 如 图 2.87 所 示 。 
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text-overflow : clip 
不 显示 省 略 标记 ， 而 是 简单 和 
text-overflow : ellipsis 


当 对 象 内 文本 溢出 时 显示 … 


图 2.87 text-overflow 示 例 效果 


3. word-wrap 


于 检索 或 设置 对 象 中 单词 之 间 的 间隔 ， 语 法 如 下 : 


word-wrap : normal break-word 


。 normal: 控制 连续 文本 换行 。 
。 break-word: 内 容 将 在 边界 内 换行 。 


4. word-break 
于 断 行 的 规则 ， 语 法 如 下 : 
word-break: normall|break-all|keep-all; 


。 normal: 使 用 浏览 器 默认 的 换行 规则 。 
。 break-all: 允许 在 单词 内 换行 。 
。 keep-all: 只 能 在 半角 空格 或 连 字符 处 换行 。 


2.15.5 边框 (Border) 

CSS 中 的 Border 主 要 用 于 处 理 边 框 效果 ， 经 常 被 使 用 在 网 页 中 ， 新 版 的 CSS 3 对 Border 属 
性 添加 了 更 多 丰富 的 功能 ， 本 节 将 介绍 以 下 几 种 功能 属性 。 

1. border-colors 


用 于 设置 或 检索 对 象 边框 的 多 重 颜色 ，CSS 2 中 border-colors 已 经 出 现 ， 但 在 CSS 3 中 可 
以 制作 渐变 边框 ， 不 过 目前 只 有 Firefox 对 border-colors 的 支持 比较 完整 。 查 看 border-colors 示 
例 ， 使 用 Firefox 浏 览 器 打开 border-colors.htm 文 件 ， 效 果 如 图 2.88 所 示 。 


HTILS 


图 2.88 border-colors 示 例 效 果 


2. border-radius 


于 设置 或 检索 对 象 使 用 圆 角 边框 ， 这 个 属性 应 该 是 目前 出 镜 率 最 多 的 CSS 3 属性 ， 也 
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上 =i 
左 


前 各 大 网 站 最 常用 的 CSS 3 属性 ， 语 法 如 下 : 
border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 


查看 border-radius 示 例 ， 使 用 Chrome 浏 览 器 打开 border-radius.htm 文 件 ， 效 果 如 图 2.89 


所 示 。 


HTNLS 


图 2.89 border-radius 示 例 效果 


3. border-image 
设置 或 检索 对 象 的 边框 样式 使 用 图 像 来 填充 ， 一 直 以 来 边框 的 填充 只 能 使 用 颜色 来 


进行 ，CSS 3 在 这 点 上 做 了 较 大 的 突破 ，borderimage 可 以 被 拆 解 为 另外 5 种 属性 。 


。 border-image-source: 用 于 设置 引入 图 片 的 地 址 。 

。 border-image-slice: 用 于 切割 引入 的 图 片 。 

。 border-image-width: 设置 边框 的 宽度 。 

。 border-image-repeat: 设置 图 片 的 排列 方式 ， 如 stretch、repeat、round。 
。 border-image-outset: 设置 边框 图 像 超过 边框 盒 的 偏 移 量 。 


border-image 属 性 语法 如 下 : 


border-image:border-image-source border-image-slice{l1,4}/border-image- 
width{1,4} border-image-repeat{0,2} 


查看 border-image 示 例 ， 使 用 Chrome 浏 览 器 打开 border-image.htm 文 件 ， 效 果 如 图 2.90 所 示 。 


bra 


图 2.90 border-image 示 例 效 果 


4. box-shadow 
于 向 边框 添加 一 个 或 多 个 阴影 ， 通 过 逗号 分 隔 阴 影 列表 ， 语 法 如 下 : 


box-shadow: h-shadow v-shadow blur spread color inset; 


各 属性 值 说 明 如 下 。 
。 h-shadow: 水 平 阴影 的 位 置 ， 允 许 负 值 。 


131 


@、 |HTML 5 网 页 开发 实例 详解 


。 v-shadow: 垂直 阴影 的 位 置 ， 允 许 负 值 。 

。 blur: 模糊 距离 ， 可 选 。 

。 spread: 阴影 的 尺寸 ， 可 选 。 

。 color: 阴影 的 颜色 ， 可 选 。 

。 inset: 将 外 部 阴影 (outset) 改 为 内 部 阴影 ， 可 选 。 


查看 box-shadow 示 例 ， 使 用 Chrome 浏 览 器 打开 box-shadowhtm 文 件 ， 效 果 如 图 2.91 所 示 。 


加 | 
一 


图 2.91 box-shadow 示 例 效 果 


2.15.6 用 户 界面 CUser interface ) 


1. outline 
于 设置 或 检索 对 象 外 的 线条 轮廓 ， 语 法 如 下 : 
out1line: [outline-color] || [outline-style] || [outline-width] || 
[outline-offset] | inherit 
各 属性 值 说 明 如 下 。 


。 outline-style: 指定 轮廓 边框 轮廓 。 

。 outline-width: 指定 轮廓 边框 宽度 。 

。 outline-offset; 指定 轮廓 边框 偏 移 位置 的 数值 。 
。 outline-color: 指定 轮廓 边框 颜色 。 


查看 outline 示 例 ， 使 用 Chrome 浏 览 器 打开 outline.htm 文 件 ， 效 果 如 图 2.92 所 示 。 


图 2.92 outline 示 例 效果 


2. box-sizing 


于 改变 容器 的 盒 模 型 组 成 方式 ， 语 法 如 下 : 


box-sizing: content-box | border-box 
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各 属性 值 说 明 如 下 。 
。 content-box: padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 ， 与 标准 模式 下 的 
使 模 型 相同 。 
。 border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 ， 表 现 为 怪异 模式 下 
的 盒 模型 。 
于 设置 或 检索 对 象 的 盒 模型 组 成 模式 ， 通 过 两 段 样式 比较 两 种 方式 的 区 别 ， 比 较 如 下 : 


.Content-box { box-sizing:content-box; width:200px; padding:10px; 
border:15px solid #eee; } 


content-box 使 用 效果 说 明 如 图 2.93 所 示 。 


.border-box { box-sizing:border-box; width:200px; padding:10px; 
border:15px solid #eee; } 


border-box x 使 用 效果 说 明 图 2.94 所 示 。 


图 2.93 content-box 图 示 图 2.94 border-box 图 示 
3. resize 
于 设置 或 检索 对 象 的 区 域 是 否 允 许 用 户 缩放 ， 调 节 元 素 尺 寸 大 小 ， 语 法 如 下 : 
resize : none | both | horizontal | vertical | inherit 
各 属性 值 说 明 如 下 。 


。 none: 不 允许 用 户 调整 元 素 大 小 。 

。 both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 
。 horizontal: 用 户 可 以 调节 元 素 的 宽度 。 

。 vertical: 用 户 可 以 调节 元 素 的 高 度 。 


使 用 效果 如 图 2.95 箭 头 所 示 区 域 。 


。 HLS 
。 HIIL5 


四 


图 2.95 resize 使 用 效果 
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4. 


nav 系 列 


于 设置 对 象 的 导航 顺序 和 方向 ， 分 为 nav-up、nav-right、nav-down、nav-up。 作 为 旧 


版 本 HTML 属 性 tabindex 的 替代 品 ， 允 许 在 CSS 中 设置 页 面 元 素 和 通过 键盘 操作 获取 焦点 的 顺 


序 ， 通 
5, 


法 如 下 : 


常 使 用 Tab 键 进行 顺序 切换 。 
ime-mode 
于 设置 或 检索 是 否 允 许 用 户 激活 输入 中 文 、 韩 文 、 日 文 等 的 输入 法 (IME) 状态 ， 语 


zoom: auto | normal | active | inactive | disabled 


各 属性 说 明 如 下 。 


提 
[RR 


auto: 默认 值 ， 不 影响 当前 输入 法 编辑 器 的 状态 。 

normal， 输 入 法 编辑 器 的 状态 应 该 是 normal， 这 个 值 可 以 用 于 用 户 样式 表 来 覆盖 页 面 
的 设置 。 

active: 输入 法 编辑 器 的 状态 初始 时 是 激活 的 ， 输 入 将 一 直 使 用 该 输入 法 直到 用 户 切 
换 输入 法 。 

inactive: 输入 法 编辑 器 的 状态 初始 时 是 非 激活 状态 ， 除 非 用 户 激活 输入 法 。 
disabled: 禁用 输入 法 编辑 器 ， 该 输入 法 编辑 器 也 许 不 会 被 用 户 激活 。 


经 过 笔者 测试 ， 目 前 新 版 的 Chrome、Opera、Safari 均 不 支持 该 属性 。 


2.15.7 多 列 (Multiple Columns) 


文本 的 多 列 布局 ， 是 CSS 3 增加 的 一 个 多 列 布局 模块 ， 排 版 布局 是 CSS 中 非常 重要 的 


功能 ， 


在 报刊 、 杂 志 的 布局 中 尤为 重要 ， 多 列 提 供 了 以 下 几 类 功能 。 


列 数 和 列 宽 : column-count、column-width。 

列 的 间距 和 分 列 样式 : column-gap、column-rule-color、column-rule-style、column- 
rule-width、column-rule。 

列 的 分 栏 符 : break-before、break-after、break-inside。 

跨越 列 : column-span。 

填充 列 : column-fill。 


查看 Multiple Columns 示 例 ， 使 用 Chrome 浏 览 器 打开 Multiple Columns.htm 文 件 ， 效 果 如 


图 2.96 所 示 。 


二 粒 俗称 树 挂 ， 是 可 遇 白色 不 透明 的 粒状 结构 溢 难 得 ， 信 入 要 宙 汪 地 
不 可 求 的 自然 奇观 。 委 沉积 物 。 委 漆 形 成 需要 区 的 吉林 市 因 其 特殊 的 
六 丰 炙 非 村， 而 是 由 于 气温 很 低 ， 而 且 水 汽 地 理 环 
数 委 摄 氏 度 以 下 很 元 分 ， 同 时 能 县 备 这 就 了 相当 于 “可 
而 尚未 结 让 的 要 渍 随 风 两 个 形成 要 省 的 极 重 要 求 ” 二 区 
体 上 不 断 积 而 又 相互 子 下 的 白 然 条 观 之 一 的 “吉林 蔷 
聚 诛 粘 的 结 是 ， 表 现 为 件 更 是 难得 。 美丽 的 要 说 ”。 


图 2.96 Multiple Columns 示 例 效果 
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2:15 


.8 转换 (Transform) 


CSS 3 Transform 包 含 旋转 (rotate) 、 扭 曲 (skew) 、 缩 放 (scale) 、 移 动 (translate) 
和 和 矩阵 变形 (matrix) ， 语 法 如 下 : 


transform: rotate | scale | skew | translate |matrix; 


SE 


使 用 多 个 transform 属 性 时 ， 需 要 使 用 空格 符号 隔 开 ， 各 属性 说 明 如 下 。 


在 
前 的 基 


rotate: 通过 设置 角度 参数 给 元 素 指定 一 个 2D 旋 转 ， 正 值 为 顺 时 针 ， 负 值 为 逆 时 针 。 
skew: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方 扭曲 变形 ， 即 义 轴 和 Y 轴 同时 按 一 定 的 
角度 值 进行 扭曲 变形 ， 同 时 还 支持 使 用 skewX 和 skewY 进 行 单个 方向 的 扭曲 变形 。 
scale: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 缩放 ， 同 时 还 支持 使 用 scaleX 和 
scaleY 进 行 单个 方向 的 缩放 。 

translate: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 移动 ， 同 时 还 支持 使 用 translateX 
和 translateY 进 行 单个 方向 的 移动 。 

matrix: 以 一 个 含 6 位 值 的 变换 矩阵 的 形式 指定 一 个 2D 变 换 ， 该 属性 涉及 到 数学 中 的 
和 天 阵 变化 ， 可 以 说 该 方法 是 transform 转 换 属 性 的 根基 ， 一 切 的 Transform 使 用 都 是 由 
matrix 变 化 而 来 的 。 


使 用 transform 属 性 前 ， 还 有 一 个 非常 关键 的 属性 transform-origin， 用 于 设置 每 次 转化 
点 位 置 ， 默 认 基点 位 置 为 中 心 位 置 ， 参 数 可 以 使 用 百 分 值 、px 或 者 方向 值 (如 left、 


Tight、top 、center 下 0bottom ) 


查 
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看 Transform 示 例 ， 使 用 Chrome 浏 览 器 打开 Transform.htm 文 件 ， 效 果 如 图 2.97 所 示 。 


图 2.97 Transform 示 例 效果 


.9 过 渡 (Transition) 


击 鼠 标 移入 元 素 ， 使 得 元 素颜 色 发 生 渐变 ， 语 法 如 下 : 


于 将 CSS 的 属性 值 在 一 定 的 时 间 区 域内 平滑 的 过 渡 ， 制 作 各 种 动态 的 效果 。 比 如 ， 单 


transition : [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'> [, [<'transition-— 
property'> || <'transition-duration'> || <'transition-timing-function'> | 
<"'transition-delay'>]]* 


各 


属性 说 明 如 下 。 


transition-property: 指定 当前 元 素 某 个 属性 改变 时 执行 的 过 渡 效 果 。 
transition-duration: 指定 转化 过 程 的 持续 时 间 ， 单 位 为 s。 
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。 transition-timing-function: 根据 时 间 的 推进 改变 属性 值 的 变换 速率 ， 在 有 6 种 ， 分 别 为 

ease (逐渐 变化 ) 、linear (匀速 ) 、ease-in 〈 加 速 ) 、ease-out (减速 ) 、ease-in-out 
( 先 加 速 后 减速 ) 、cubic-bezier ( 自 定义 贝 塞 尔 曲线 值 ) 。 

。 transition-delay: 设置 延 后 执行 时 间 ， 即 当 元 素 属性 值 发 生 改 变 后 多 少时 间 开 始 执 
行 ， 单 位 为 s。 

查看 Transition 示 例 ， 使 用 Chrome 浏 览 器 打开 Transition.htm 文 件 ， 效 果 如 图 2.98 所 示 。 

将 鼠标 移入 方 框 区 域内 ， 图 中 的 两 个 圆 形 各 自 的 位 置 、 颜 色 、 形 状 发 生变 化 ， 变 化 后 的 

效果 如 图 2.99 所 示 。 


A @ 
) 


图 2.98 Transition 示 例 效 果 图 2.99 Transition 示 例 变化 后 


2.16 本 章 小 结 


CSS 3 出 来 已 经 有 一 段 时 间 了 ， 很 多 的 网 站 开始 大 规模 地 使 用 CSS 3 对 网 页 进行 重 构 。 本 
章 从 开放 字体 格式 、 背 景 、 文 字 效 果 、 边 框 、 用 户 界面 、 多 列 、 转 换 和 过 渡 这 8 个 方面 介绍 
和 学 习 CSS 3 带 来 的 新 功能 ， 借 助 这 些 功 能 ， 开 发 者 可 以 将 原来 使 用 JavaScript 实 现 的 动画 效 
果 ， 甚 至 有 一 些 无 法 实现 的 效果 ， 简 单 地 通过 CSS 3 进行 开发 实现 ， 极 大 地 缩短 了 开发 时 间 
和 降低 了 维护 成 本 。 虽 然 ， 目 前 并 非 所 有 的 浏览 器 都 能 使 用 CSS 3 的 效果 ， 但 网 站 开发 者 可 
以 遵循 渐进 增强 的 原则 进行 网 站 优化 。 
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HTML 5 相关 概念 和 
框架 


HTML 5 的 概念 风声 水 起 ， 各 种 概念 与 框架 应 运 而 生 。HTML 5 本 身 就 
是 一 个 很 宽泛 的 词 ， 从 严格 意义 上 说 ，HTML 5 代表 的 是 最 新 版 本 的 Web 语 
义 标准 ， 目 前 最 具 权 威 和 影响 力 的 是 1994 年 成 立 的 万 维 网 联盟 World Wide 
Web Consortium ( W3C ) 制定 的 标准 。 到 目前 为 止 ，W3C 已 经 发 布 了 
200 多 项 Web 技 术 标准 及 实施 指南 。HTML 5 发 展 至 今 已 有 数 十 年 ， 各 种 围 
绕 标准 而 产生 的 框架 也 异常 之 多 ， 本 章 将 从 几 个 大 方向 介绍 典型 且 应 用 广泛 
的 概念 与 框架 ， 帮 助 读者 了 解 在 实际 项 目 中 如 何 选择 和 使 用 这 些 框架 。 

本 章 知识 点 : 

。 响应 式 Web 设 计 

。 移动 JavaScript 框 架 

。 CSS 3 UI 框架 

。 HTML 5 图 表 库 


3.1 响应 式 Web 设 计 


近 几 年 来 ， 设 备 与 分 辩 率 的 更 新 过 快 ， 在 不 同 的 分 辩 率 下 ， 用 户 体验 问题 越 来 越 困 
户 和 开发 者 。 如 果 为 了 获得 良好 的 用 户 体验 ， 传 统 的 互联 网 开发 模式 只 能 针对 各 种 设备 和 分 
辩 率 进行 定制 ， 响 应 式 Web 设 计 是 对 这 种 问题 的 变革 。 响 应 式 设计 可 以 说 是 2013 稀 
的 一 种 设计 趋势 ， 越 来 越 多 的 个 人 和 公司 也 加 入 了 响应 式 设计 的 阵列 。 那 么 ， 到 底 什么 是 
应 式 设计 ， 响 应 式 设计 给 我 们 带 来 了 什么 ， 响 应 式 设计 真 的 是 万 能 的 吗 ? 本 章 将 为 你 一 一 揭 


晓 这 些 答案 。 


3.1.1 什么 是 响应 式 Web 设 计 


响应 式 Web 设 计 (Responsive Web Design) 是 指 一 个 页 面 的 设计 与 开发 可 以 根据 


FE 比较 流行 


扰 


可 


户 行 


为 〈 如 改变 浏览 器 窗口 大 小 ) 和 不 同 设备 环境 〈 如 系统 平台 、 屏 幕 分 辨 率 以 及 现在 流行 的 屏 
幕 定 向 等 ) 做 出 相应 的 响应 ， 适 应 用 户 可 感知 的 流畅 的 阅读 和 操作 体验 。 响 应 式 设计 一 般 需 


考虑 几 种 状态 ， 以 适应 不 同 的 分 辩 率 不 同 的 设备 和 用 户 行为 。 因 此 需 


ml 


之 间 有 序 的 协调 ， 简 单 来 说 ， 它 不 是 一 个 部 门 的 
响应 式 设计 一 般 都 需要 遵循 一 个 有 序 可 寻 的 流程 ， 一 般 响应 式 设 计 遵循 


设 


“in 


计 、 前 端 和 
情 ， 而 是 多 个 部 门 共同 协作 的 结果 。 


开发 
所 以 


计 先 行 ， 内 
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先 ， 移 动 优先 ”的 原则 。 在 移动 终端 屏幕 ， 交 互 设计 师 先 根据 终端 进行 交互 设计 ， 把 需求 上 
最 重要 的 内 容 展示 在 移动 小 屏幕 上 。 之 所 以 移动 优先 也 是 这 个 原因 ， 小 屏幕 可 以 让 交互 设计 
师 提 炼 出 什么 是 最 重要 的 内 容 ， 可 以 让 交互 设计 师 更 专注 于 设计 。 前 端 和 开发 根据 不 同 的 设 


备 、 分 辩 率 和 应 用 场景 设计 移动 框架 和 响应 式 框架 。 
一 般 响 应 式 Web 设 计 包 括 以 下 几 个 模式 。 


。 布局 (Layout) 

。 导航 (Navigation) 

。 图 片 (Image) 

。 多 媒体 (Media) 

。 表单 (Form) 

。 模块 /组 件 (Modules) 


有 关 响 应 式 模式 的 更 多 资料 请 参考 网 站 http://bradfrost.github.io/this-is-responsive/patterns. 


查 _ 
国 ™ html 


3.1.2 流 式 布局 


响应 式 设计 最 主要 的 两 个 技术 分 别 是 流 式 布局 和 媒体 查询 。 
一 套 灵活 的 流体 网 格 系统 搭建 网 站 的 布局 。 流 体 网 格 系统 的 网 格 
百分比 或 em) 进行 设计 。 这 种 网 格 系统 的 好 处 是 可 以 根据 视窗 的 
调整 网 格 的 宽度 。 所 以 不 管 宽度 如 何 改变 ， 每 一 个 网 格 的 比例 都 
同 的 设备 。 流 式 布局 一 般 不 使 用 绝对 单位 〈 如 像素 ) 进行 设计 
局 限 性 ， 而 且 网 格 的 宽度 不 会 随 着 设备 的 不 同 而 改变 。 


个 习 


这 里 所 指 的 流 式 布局 是 利用 
一 般 采 用 相对 单位 长 度 〈 如 
不 同 宽度 按 比例 进行 动态 的 
是 固定 的 ， 可 以 很 好 地 适应 
， 因 为 使 用 绝对 单位 有 很 多 


那么 如 何 将 平常 所 使 用 的 固定 网 格 系统 转化 成 流 式 布 局 呢 ，Ethan Marcotte 提 出 了 一 个 非 
常 方便 的 计算 公式 ， 即 ， 用 目标 元 素 的 宽度 除 以 其 父 级 元 素 的 宽度 ， 公 式 如 下 : 


相对 宽度 = 目标 元 素 的 宽度 二 其 父 级 元 素 的 宽度 ， 
比如 HTML 代 码 如 下 : 


<div class=” container” > 
<aside>…</aside> 
<Ssection>…</section> 
</div> 


固定 布局 样式 代码 如 下 : 


.container{ 
width: 900px; 


} 

asidef 
width: 240px; 
foat: Left? 
margin: lO0px; 


138 


第 3 齐 HTML5 相 关 概念 和 框架 


Section{ 
width: 660px; 
float: right; 
} 


转化 成 流 式 布 局 代码 如 下 : 


-container{ 
max-width: 900px; 
} 


asidei{ 
width: 26.6667%; J "240 900  */ 
float: left; 
margin: 1.1111%; Lop 0 
} 
Section{ 
width: 73.3333%; /660 3 900 %/ 


float: right; 


Ethan Marcotte 是 《RESPONSIVE Web DESIGN》 的 作者 ， 他 最 早 提 出 响应 式 设计 相关 概念 。 
| 臣下 有 关 作 者 的 详细 信息 请 参考 http://alistapart.comy/author/emarcotte， 相 关 的 书籍 的 详细 信息 请 参 
考 http://www.abookapart.com/products/responsive-web-design/。 


3.1.3 媒体 查询 


响应 式 设计 的 另 一 个 重要 技术 手段 是 媒体 查询 。 如 果 只 是 简单 地 设计 一 个 流 式 布局 系 
统 ， 那 么 可 以 保证 每 个 网 格 按 比例 地 放大 和 缩小 ， 但 有 可 能 会 使 得 在 小 屏幕 下 如 手机 设 
备 ) 因 网 格 太 小 而 严重 影响 阅读 ， 这 样 的 设计 称 不 上 响应 式 设计 。 媒 体 查询 可 以 来 解决 这 一 
问题 。 媒 体 查询 可 以 为 特定 的 浏览 器 和 设备 提供 特定 的 样式 。 媒 体 查询 是 CSS 3 的 一 个 新 特 
性 ， 是 对 媒体 类 型 的 扩展 。 


查 _ 
| 力 下 W3C 列 出 了 10 种 媒体 类 型 ， 请 参考 http://www.w3.org/TR/CSS2/media.html#media-types。 


在 响应 式 设计 中 ， 媒 体 查询 一 般 在 CSS 中 定义 ， 如 最 常见 的 使 用 方式 设置 屏幕 宽度 小 于 
1024px 时 的 样式 ， 代 码 如 下 : 
@media screen and (max-width: 1024px){ 


// 在 这 里 设置 小 于 1024px 时 的 样式 


设置 屏幕 宽度 小 于 600px 时 的 样式 ， 代 码 如 下 : 


@media screen and (max-width: 600px){ 
// 在 这 里 设置 小 于 600px 时 的 样式 
} 


设置 屏幕 宽度 在 600px~900px 之 间 时 的 样式 ， 代 码 如 下 : 
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@media screen and (max-width: 600px) and (min-width: 900px){ 
// 设置 样式 
} 


设置 设备 的 实际 分 辩 率 小 于 480px 时 的 样式 〈 如 iPhone) ， 代 码 如 下 : 


@media screen and (max-device-width: 480px){ 
// iPhone 手机 样式 在 这 里 设置 
} 


设置 :Pad 或 Phone 在 横向 时 的 样式 ， 代 码 如 下 : 


@media screen and (orientation:landscape){ 
// 在 这 里 设置 样式 
} 


提 _ 
I 芭 * 更 多 关于 媒体 查询 请 参考 http://www.w3.org/TR/css3-mediaqueries/。 


3.1.4 Twitter Bootstrap 理 念 


Bootstrap 是 一 款 提供 给 开发 人 员 快 速 搭建 页 面 的 前 端 框架 ， 它 利用 HTML、CSS 和 
JavaScript 来 帮助 构建 用 户 界面 组 件 。 开 发 人 员 可 以 使 用 Bootstrap 作 为 基础 ， 快 速 创建 站 点 或 
者 Web 应 用 程序 。 最 早 的 Bootstrap 框 架 始 于 2011 年 8 年 ， 当 时 Twitter 开源 了 Bootstap 。 

Twitter Bootstrap 包 括 了 图 表 、 栅 格 系统 、 排 版 、 表 格 、 表 单 、 按 钮 、 导 航 、 图 像 、 响 应 
式 设 计 和 其 他 一 些 交 互 组 件 。 最 新 版 本 的 Twitter Bootstrap 3 已 经 很 好 地 支持 了 响应 式 设计 ， 
同时 也 遵守 移动 优先 和 图 片 响应 的 设计 原则 。 


棍 _ 
| 国 下 更 多 关于 Twitter Bootstrap 地 址 的 信息 请 参考 其 官网 地 址 http://getbootstrap.com/。 


3.1.5 Twitter Bootstrap 应 用 


Twitter Bootstrap 的 应 用 非常 广泛 ， 本 小 节 主 要 介绍 如 何 使 用 Bootstrap。 

1. 下 载 Bootstrap 

Bootstrap 的 下 载 方 式 有 多 种 。 
(1) 官方 网 站 下 载 地 址 为 http://getbootstrap.com， 如 图 3.1 所 示 。 
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Boeotstrap 3 RC1 


Bootstrap 3 


Sleek, intuitive, and powerful mobile- 
first front-end framework forfaster and 
easier Web development 


Download Bootstrap 


图 3.1 Bootstrap 官 方 下 载 地 址 


(2) 如 果 想 获取 最 新 开发 中 的 Bootstrap 版 本 ， 可 以 通过 GitHub 网 站 https://github.com/ 
twbs/bootstrap， 如 图 3.2 所 示 。 


GitHub "eemv- © Bopim Featwres Emterprise Blog [sm :… 


[| twbs /bootstrap Star s56m Pp For Maes 


code 


ne 300Wp -bootstrap /@ 


#99 fom twbs/make socs pmb mre val 


图 3.2 GitHub 中 的 Bootstrap 


(3) 通过 Bower 安 装 ，Bower (http://bower.io/) 是 Twitter 公 司 开 发 的 包 管理 工具 ， 命 令 
如 下 : 


$bower install bootstrap 
(4) 直接 使 用 CDN 文 件 ， 代 码 如 下 : 
<!-- 最 新 版 本 的 css 文 件 --> 


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0- 
rcl/css/bootstrap.min.css"> 


<!-- 最 新 版 本 的 Javascript 文 件 --> 
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<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rcl/js/bootstrap. 
min.js"></script> 
CDN 全 称 Content Delivery Network， 中 文 意思 内 容 分 发 网 络 。 基 本 的 设计 思路 是 尽 可 能 避 开 
| 轰 趟 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传 输 得 更 快 、 更 稳定 。 通 
过 在 网 络 各 处 放置 节点 服务 器 所 构成 的 在 现 有 的 互联 网 基础 之 上 的 一 层 智能 虚拟 网 络 ，CDN 
系统 能 够 实时 地 根据 网 络 流量 和 各 节点 的 连接 、 负 载 状 况 以 及 到 用 户 的 距离 和 响应 时 间 等 综合 信息 ， 
将 用 户 的 请 求 重 新 导向 离 用 户 最 近 的 服务 节点 上 。 其 目的 是 使 用 户 可 就 近 取 得 所 需 内 容 ， 解 决 Internet 
网 络 拥挤 的 状况 ， 提 高 用 户 访问 网 站 的 响应 速度 。 


2. 在 HTML 文 件 中 引入 Bootstrap 文 件 
在 HTML 中 引入 Bootstrap 的 CSS、JavaScript 文 件 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 使 用 Bootstrap 模板 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<!1-- 引 入 Bootstrap 的 css 文 件 --> 
</head> 
<body> 
<hl>Hello, world!</h1> 
<script src="js/bootstrap.min.js"></script> <!-- 如 果 需 要 Javascript， 
则 引入 Bootstrap 的 Javascript 组 件 --> 


<script src="js/respond.js"></script><!-- 如 果 是 设计 一 个 响应 式 网 站 ， 且 需要 
支持 IE 6/IE 7/IE 8， 则 引入 respond.js--> 
</body> 
</html> 


Bootstrap 支 持 响应 式 设 计 ， 如 果 设 计 的 站 点 或 者 Web 应 用 程序 ， 需 要 支持 IE 6/7/8 等 浏览 
器 ， 但 因 其 不 支持 Media Query， 则 需要 引入 Respond.js 库 。 


| 所 -Respondjs 是 提供 一 套 快速 且 轻 量 级 的 针对 不 支持 Media Queries 浏 览 器 的 优雅 降级 的 解决 广 
区 案 ， 其 GitHub 地 址 为 https://github.com/scottjehl/Respond。 


3.， 响应 式 设 计 布 局 举例 


比如 要 制作 一 个 流 式 炭 套 布局 ， 和 固定 栅 格 的 嵌 套 有 些 不 同 ， 被 嵌 套 的 列 数 之 和 为 12， 
流 式 柑 套 布局 使 用 百分比 来 设置 每 列 的 宽度 ， 代 码 如 下 : 


<div class="row-fluid"> 
<div class="span12"> 
流 12 
<div class="row-fluid"> 
<div class="span6"> 


流 6 


<div class="row-fluid"> 
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<div class="span6"> 流 6</div> 
<div class="span6"> 流 6</div> 
</div> 
</div> 
<div class="span6"> 流 6</div> 
</div> 
</div> 
</div> 


浏览 器 运行 效果 如 图 3.3 所 示 。 


Fluid 12 


Fluid 6 Fluid6 


图 3.3 Bootstrap 流 式 嵌 套 布 局 


3.2 移动 JavaScript 框 架 


2013 年 移动 互联 网 已 经 成 为 了 各 大 互联 网 公司 争先 抢夺 的 入 口 ， 移 动 互联 网 的 商机 正 
在 被 挖掘。 本 节 介 绍 目前 比较 典型 的 移动 JavaScript 框 架 ， 并 帮助 读者 了 解 和 使 用 这 些 移动 
JavaScript 框 架 ， 帮 助 用 户 快速 从 PC 的 开发 转移 到 移动 开发 中 。 这 些 框架 包括 Sencha Touch、 


jQuery Mobile、PhoneGap、JQ.Mobi 等 ， 最 后 会 对 各 个 移动 JavaScript 框 架 进行 对 比 。 


3.2.1 Sencha Touch 


Sencha Touch 是 一 款 高 性 能 的 专门 为 移动 设备 开发 的 HTML 5 移动 应 用 开发 框架 ， 从 ExtJS 
合 而 来 。 使 用 Sencha Touch 可 以 创建 非常 类 似 于 Native App 的 Web App。Sencha Touch 目 前 支 
持 iOS、Android、BlackBery、Windows Phone 等 主流 移动 应 用 开发 。 


可 Native App 是 一 种 基于 智能 手机 本 地 操作 系统 如 iOS、Android、Windows Phone， 并 使 用 原生 
| 畏 各 业绩 写 运行 的 第 三 方 应 用 程序 。 

Sencha Touch 的 特点 如 下 : 

。 超过 50 个 内 置 组 件 。 

。 拥有 流行 的 主题 。 

。 内 置 MVC 系 统 。 

。 完全 基于 HTML 5 技术 ， 流 畅 的 动画 和 无 颖 的 滚动 使 得 Sencha Touch 看 起 来 和 一 个 本 


@、 |HTML 5 网 页 开发 实例 详解 


地 应 用 一 样 。 
。 响应 式 布局 ， 支 持 设备 横 屏 和 竖 屏 。 


创建 Sencha Touch 应 用 相对 比较 简单 ， 下 面 来 创建 一 个 查看 当前 天 气 的 APP 应 用 。 
1. 导入 Sencha Touch 对 应 的 JavaScript 和 CSS 资 源 文件 


棍 _ 
reg Sencha Touch 下 载 请 前 往 官 方 网 站 http://www.sencha.com/products/touch/download/。 


(1) 在 localhost 根 目录 下 创建 weather 文 件 夹 ， 并 把 下 载 好 的 sencha-touch.css 和 sencha- 
touch-all-debug.js 文 件 放 到 该 文件 夹 下 。 
(2) 创建 index.html 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 
03 <head> 
04 <meta charset="UTF-8"> 
05 <title> 天 气 预报 </title> 
06 <link rel="stylesheet" href="sencha-touch.css" type="text/css"> 
<!-- Sencha Touch 样 式 07 一 => 
08 <link rel="stylesheet" href="app.css" type="text/css"> 
<!-- 业务 应 用 样式 --> 
09 <script type="text/javascript" src="sencha-touch-all-debug.js"> 
</script> <!-- Sencha Touch 脚 本 10 --> 
和 <script type="text/javascript" src="app.js"></script> 
<!-- 业务 应 用 脚本 --> 
12 </head> 
13 <body></body> 
14 </html> 


2. 创建 app.js 应 用 文件 


01 Ext.YQL = { 


02 
03 
04 
05 
06 
07 
08 
09 
10 
LE 
le 
Ue 
14 
15 
16 
3 
18 
19 ]2 


useAllPublicTables: true, 
yqlUrl: 'http://query.yahooapis.com/v1l/public/yql', 
request: function (config) { 
Var params = config.params || {}; 
params.q = config .querYy7 
params.format = 'json'; // 数据 为 json 格 式 
if (this.useAllPublicTables) { 
params.env = 'store://datatables.org/alltableswithkeys'; 
} 


Ext .data.JsonP.request ({ // 远程 jsonp 请 求 
url: this.yqlUrl， // 请 求 地 址 
callbackKey: "callback'v // 回调 参数 名 
params: params, // 传递 参数 
callback: config.callback, // 回调 方法 
scope: config.scope || window // 回调 上 下 文 


Ds 
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20 var tpl = new Ext-XTemplate( // 显示 模板 

21 "<div class="weather">"', 

22 '<h2> 当 前 城市 ，{cityName}， 温 度 : {code}&deg;</hl>'， 

2 "<h3> 查 询 时 间 : {time}</h3>'， 

24 7 二 /3 

25 ); 

26 var makeYqlRequest = function (button) { 

2 Ext .YQL.request ({ 

28 query: "select * from weather.forecast where woeid = 2132574', 
// 查询 杭州 的 天 气 

29 callback: function(success, response) { // 查询 结果 返回 

30 Var results = []; 

3 下 if (response && response.query && response.query.results) 
{// 获取 返回 值 

92 results = response.query.results; 

23 Var weather html = tpl.apply({ // 更 新 模板 数据 

34 cityName: results.channel.location.city, 

35 code: results.channel.item.condition.code, 

36 time: results.channel.item.condition.date 

= ]) 7 

38 Ext .getCmp('weatherContent') .setHtml (weather html); 
// 根据 id 获取 天 气 面板 ， 更 新 数据 

39 } 

40 } 

4 ]) 7 


42 1 人 2 
43 Ext.application({ 
44 name: ' 天 气 预 报 '， 


45 launch: function() { 

46 Ext.create ("Ext.tab.Panel", { 

47 fullscreen: true, // 是 否 全 屏 

48 tabBarPosition: '‘'bottom’', 

49 items: [ 

50 Te 

51 xtype: 'nestedlist', 4 

52 title: ' 杭 州 天 气 '， VA 

53 iconCls: 'home', Fk 

54 id: 'weatherContent', Zh 

55 html: 'Loading...' Vo 

56 ]} 

57. 

58 xtype: 'nestedlist'，title: ' 关 于 '， 
iconCls: 'info', displayField: 'title', cls: 'home', 

59 html: [ 

60 "<div class="info">', 

61 '<h1> 数 据 来 源 </h1>'， 

62 "<p> 天 气 数据 来 源 于 Yahoo 

(http://query.yahooapis.com) </p>", 

63 "ydw>x 

64 ] Gin 未 

65 } 
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66 ] 

67 ]) 

68 下 

69 1); 

3. 创建 内 容 样式 文件 

01 .weather, .infof // 面板 样式 
02 background: #f3f8ff; 

03 -webkit-border-radius: 2em; 

04 border-radius: 2em; 

05 -webkit-box-shadow: inset 0 lpx lpx #bdd0ea; 

06 box-shadow: inset 0 lpx lpx #bdd0ea; 

07 padding: lem; 

08 text-align: center; 

09 text-shadow: 0 lpx 0 #fff; 

Loy 

11 .weather h2, .info hl { // 一 级 、 二 级 标题 样式 
12 Color: #1c3961; 

13 font-size: 3em; 

14 font-weight: bold; 

hE margin-bottom: .lem; 

.Goh 

17 .weather h3, .info p { // 三 级 和 内 容 文字 样式 
18 Color: #53719b; 

六 font-size: lem; 

20 } 


4. 运行 文件 
在 手机 浏览 器 或 者 PC 上 的 Chrome 浏 览 器 打开 该 文件 ， 即 可 直接 运行 。 本 示例 在 iPhone 4s 
上 运行 气象 信息 ， 效 果 如 图 3.4 所 示 。 


关于 


ETTED CD 


杭州 天 气 


当前 城市 : 数据 来 源 


HH angzhou Yahoo (http://query.yahooapis.com) 
温度 : 33” 


查询 时 间 : Wed, 14 Aug 2013 


图 3.4 iPhone 4 气象 信息 示例 运行 效果 
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3.2.2 jQuery Mobile 介 绍 和 例子 


jQuery Mobile 是 一 个 基于 HTML 5 技术 搭建 的 一 套 触 控 友 好 的 用 户 界 面 (UI) 框架 。 该 
框架 允许 不 编写 任何 JavaScript 代 码 而 让 网 站 和 应 用 可 以 运行 在 所 有 流行 的 移动 设备 平台 上 。 


其 轻 量 极 的 代码 架构 ， 使 其 可 更 灵活 地 扩展 和 更 易 主题 化 设计 。jQuery Mobile 的 基本 特性 主 


要 包括 以 下 几 项 。 


简单 性 : 框架 使 用 简单 ， 无 须 编 写 JavaScript 或 者 极 少 编写 JavaScript 代 码 ， 就 可 以 实 
现 良好 的 UI 效 果 和 交互 体验 。 

持续 增强 和 优雅 降级 : jQuery Mobile 构 建 于 jQuery 内 核 ， 不 仅 提供 高 端 设备 良好 的 用 
户 体验 ， 也 支持 低 端 设备 ， 并 尽 可 能 的 提供 良好 体验 。 

可 访问 性 : jQuery Mobile 在 设计 时 考虑 了 用 户 的 访问 能 力 ， 它 拥有 Accessible Rich Internet 
Applications (WAILARIA) 支持 ， 以 帮助 使 用 辅助 技术 的 残障 人 士 访问 Web 页 面 。 

主题 设置 jQuery Mobile 提 供 主 题 系统 ， 允 许 提供 自己 的 应 用 程序 样式 。 


创建 jQuery Mobile 的 应 用 很 容易 ， 下 面 来 创建 新 闻 阅 读 列 表 应 用 。 
(1) 创建 一 个 HTML 页 面 ， 命 名 为 home.html， 并 在 head 标 签 中 引入 jQuery Mobile 的 库 文 


件 ， 代 码 示例 如 下 : 

01 <!doctype html> 

02 <html> 

03 <head> 

04 <title> 阅 读 列表 </title> 

05 <meta charset="utf-8"> 

06 <meta name="viewport" content="width=device-width, 
initial-scale=1"> 

07 <link rel="stylesheet" href="http://code.jQuery.com/mobile/1.3.2/ 
jQuery.mobile-1.3.2.min.css"> 

08 <script src="http://code.jQuery.com/jQuery-1.9.1.min.js"> 
</script> 

09 <script src="http://code.jQuery.com/mobile/1.3.2/jQuery.mobile-— 
Le32emine a </CriDLE> 

10 </head> 

11 <body> 

12 </body> 

13 </html> 


本 示例 使 用 的 jQury Mobile 的 JavaScript 和 CSS 文 件 直 接 引用 了 jQuery 的 CDN 服 务 嚣 ， 也 可 


以 直接 从 其 官方 网 站 下 载 到 自己 的 服务 器 上 。 
(2) 在 body 中 添加 第 一 个 页 面 ， 代 码 如 下 : 


01 
02 


<div data-role="page"> 
<div data-role="header"> <!-- 页 头 区 域 --> 
<h1> 阅 读 列表 </h1> 
</div> 
<div data-role="content"> <!-- 主 显示 内 容 区 域 --> 


<ul data-role="listview" data-inset="true" 
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QH samen ee 


data-filter="true"> 


07 <li><a href="news.html" data-transition="slide"™" 
data-inline="true"> 关 于 公历 的 那些 事 </a></1i> 

08 <li><a href="#">Tessel: 用 JavaSscript 做 嵌入 式 开发 
</a></1i> 

09 <1i><a href="#"> 普 通 与 顶级 的 UI 设计 师 区 别 在 哪里 ? </a></1i> 

10 <1li><a href="#">Linux 的 启动 流程 </a></1i> 

To <1i><a href="#"> 每 个 开发 团队 都 该 搞 个 git </a></1i> 

12 </ul> 

E3 </div> 

14 <div data-role="footer" data-position="fixed"> <!-— 页 脚 区 域 --> 

15 <div data-role="navbar"> <!-- 导航 区 域 --> 

16 <ul> 

uh <li><a href="#" data-icon="grid" class= 
"ui-btn-active">Home</a></1i> 

18 <li><a href="about.html" 
data-transition="flip" data-icon="about">About</a></1i> 

19 </ul> 

20 </div> 

2 </div> 

22 </div> 


这 个 页 面 非常 简 


， 主 要 包括 三 个 部 分 ， 分 别 是 头 部 (Header) 、 主 体内 容 〈Content) 、 


尾部 〈Footer) ，jQuery Mobile 的 data-role 是 最 主要 的 页 面 布 局 和 UI 泻 染 ， 通 常 有 以 下 几 项 。 


。 标识 一 个 用 页 面 : data-role="page"。 

。 标识 头 部 ; data-role="header"。 

。 标识 主体 内 容 : data-role="content"。 

。 标识 尾部 : data-role="footer"。 

。 标识 为 一 个 列表 : data-role="listview"。 


主体 内 容 主 要 是 一 个 ul 结构 的 新 闻 列 表 ， 要 显示 为 一 个 列表 结构 ， 只 要 指定 ul 元 素 上 的 
data-role="listview" 即 可 。 


第 07 行 中 ， 指 定 


a 链 接地 址 为 new.html， 指 定 切换 效果 为 滑动 Slide) 。 在 jQuery Mobile 


中 ， 页 面 间 的 切换 效果 可 以 使 用 data-transition 表 指定 。 


所 _ 
| 轧 下 更 多 的 效果 请 参考 http://jQuerymobile.com/demos/1.3.0/docs/widgets/transitions/。 


第 14 行 ， 设 置 data-position="fixed"，jQuery Mobile 能 识别 它 并 把 该 底部 导航 固定 在 屏幕 


直方 < 
代码 第 15 行 ， 


因为 网 页 底部 为 一 个 havbar 的 导航 ， 只 需要 在 ul 结构 上 指定 data- 


role="navbar" 就 可 以 把 ul 结构 泻 染 为 底部 标签 进行 切换 。 


查 _ 
ee 有 关 更 多 jQuery Mobile 的 内 容 和 使 用 方法 请 查看 其 官方 网 站 http://jQuerymobile.comy/ 的 内 容 。 
读者 可 以 打开 代码 光盘 ， 运 行 该 示例 ， 在 浏览 器 中 打开 home.html， 就 可 以 看 到 一 个 非常 


简单 的 阅读 列表 ， 如 


图 3.5 所 示 。 


148 


3.2.3 PhoneGap 


PhoneGap 是 一 个 基于 
它 使 开发 者 能 够 利用 


发 平台 。 


= 


UL = 第 3 章 HTML 5 相关 概 


念 和 框架 


关于 公历 的 那些 事 
Tessel: 用 JavaScript 做 嵌入 … 
普通 与 顶级 的 UI 设计 师 区 别 在 .… 


Linux 的 启动 流程 


© 
© 
© 
© 
© 


每 个 开发 团队 都 该 搞 个 git 


图 3.5 阅读 列表 


FHTML、CSS 和 JavaScript 的 创建 移动 跨 平台 移动 应 上 
iPhone、Android、Palm、Symbian、WP7、Bada 和 Blackberry 


程序 的 快速 开 


智能 手机 的 核心 功能 ， 包 括 地 理 定位 、 联 系 人 、 声 音 和 振动 等 ， 此 外 PhoneGap 拥 有 丰富 的 插 


件 ， 可 以 以 此 扩 


展 无 限 的 功能 。PhoneGap 是 免费 的 ， 但 是 需要 特定 平台 提供 的 附加 软件 ， 例 


如 iPhone 的 iPhone SDK、Android 的 Android SDK 等 ， 也 可 以 和 Dreamweaver 5.5 配 套 开发 。 使 
用 PhoneGap 只 比 为 每 个 平台 分 别 建立 应 用 程序 好 一 点 ， 因 为 虽然 基本 代 
然 需要 为 每 个 平台 分 别 编译 应 用 程序 。 


码 是 一 样 的 ， 但 是 仍 


电脑 软件 公司 Adobe 2011 年 10 月 4 日 宣布 收购 创建 了 HTML 5 移动 应 用 框架 PhoneGap 和 
PhoneGap Build 的 新 创 公司 Nitobi Software。Adobe 表 示 收 购 PhoneGap 后 ， 开 发 者 便 可 选择 在 
PhoneGap 平 台 使 用 HTML、CSS 和 JavaScript 创 建 移动 应 用 程序 ， 也 可 选择 使 用 Adobe Air 和 
Flash。 

安装 PhoneGap 非 常 简单 ， 下 面 以 在 Mac 平 台 下 开发 1iOS 应 用 为 例 ， 简 单 描述 其 应 用 的 部 
署 和 开发 实例 。 

1. 安装 Xcode 


使 用 命令 行 工 具 创 建 iOS 习 


XCode， Xcode 的 


棍 _ 
( 轰 下 


2. 在 XCode 中 安装 Apple 的 Command Line Tools 
Xcode 安装 完成 后 ，PhoneGap 要 正常 运行 ， 需 要 为 Xcode 安装 Command Line Tools， 具 体 


的 安装 方法 为 : 打开 Xcode 应 | 上 
在 弹出 的 属性 菜单 中 选择 Downloads (下 载 ) 选 项 卡 ， 在 1 


F 全 上 的 PhoneGap 应 用 项 目 ， 首 先 需要 安装 Apple 的 开发 工 
安装 可 以 直接 通过 App Store 来 安装 。 


程序 ， 在 Xcode 下 拉 菜 单 栏 中 选择 Preferences (属性 ) 菜单 ， 


下 载 选项 卡 


县 


安装 Xcode 地 址 https://itunes.apple.com/us/app/xcode/id497799835?mt=12。 


选择 Components 面 


JIHTML 5mrmraxmrr >、,. 


板 ， 在 Components 的 安装 列表 中 找到 Command Line Tools， 单 击 Install 按 钮 进行 安装 ， 如 图 3.6 
所 示 。 


大 ,os 6.0 Simulator (573.4MB) 
村 105 5.1 Simulator (614.5 MB) mal 
| 枉 i0s $0 Simulaor (554.1 MB) ma 


图 3.6 在 Xcode 中 安装 Commane Line Tools 


3. 安装 PhoneGap 
PhoneGap 3.0 版 本 的 安装 只 需要 通过 NPM 包 管理 工具 就 可 以 ， 所 以 在 安装 PhoneGap 之 前 
请 先 确保 安装 Node.js。 打 开 Shell 控 制 面板 ， 在 命令 行 中 ， 输 入 以 下 命令 安装 PhoneGap: 


sudo npm install -g phonegap 


IE 有 关 Node js 的 安装 请 参考 本 书 第 4 章 环境 搭建 的 内 容 。 


4. 安装 Apache Cordova 


Apache Cordova 是 用 于 构建 、 部 署 和 管理 基于 HTML、CSS 和 JavaScript 的 命令 行 工 具 ， 
目前 支持 Android、BlackBerry 10、iOS、Windows Phone 7 & 8 等 平台 。 在 命令 行 中 输入 安装 


Cordova 命 令 : 


sudo npm install -g cordova 


5. 创建 最 简单 的 Hello Word 应 用 
在 Shell 中 输入 以 下 命令 ， 创 建 一 个 HelloWorld 应 用 程序 : 


cordova create hello com.example.hello "HelloWorld" 

cordova platform add ios 

cordova prepare 

输入 这 三 个 命令 后 ， 一 个 iOS 的 PhoneGap 应 用 程序 已 经 创建 完成 ， 其 目录 结构 如 图 3.7 
所 示 。 

双击 运行 该 目录 结构 下 的 “platforms/ios/HelloWorld.xcodeproj” 文 件 ， 在 Xcode 中 单 击 
Run 按 钮 ， 直 接 运 行 该 示例 程序 ， 其 结构 如 图 3.8 所 示 。 
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图 
所 
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[— platforms 
ios 


CordovaLib 
HelloWorld 
HelloWorld.xcodeproj 


cordova 
ww 
|— plugins 
[一 ios.json 


融 ( 尝 
index.]s 
| res 


EE icon 
screen 


3.7 PhoneGap 在 iOS 平 台 上 的 目录 结构 图 3.8 运行 结果 


| 四。 读者 可 以 简单 修改 index html 文 件 的 内 容 ， 然 后 再 单 击 Run 按 钮 ， 重 新 运行 该 程序 。 


3.2.4 JQ 


.Mobi 


JQ.Mobi 是 HTML 5 的 移动 框架 ， 由 Inter 公 司 赞助 。JQ.Mobi 是 jQuery 的 部 分 重 写 版 本 ， 
所 以 其 API 和 jQuery 是 一 模 一 样 的 ， 使 用 起 来 非常 容易 上 手 。JQ.Mobi 针 对 移动 设备 只 提供 必 
要 的 API， 构 成 一 个 极 快速 的 查询 库 ， 目 前 已 经 超过 了 60 个 API 可 以 使 用 ， 而 其 文件 大 小 只 


16KB。 
JQ.Mobi 


。 快速 
。 UI: 


由 三 个 组 件 组 成 。 


查询 : 支持 W3C， 支 持 Windows 8JS。 
提供 一 套 友好 的 CSS 程 序 库 ， 完 美 支持 原生 的 样式 主题 ， 包 括 10S、iOS7、 


Android、Windows 8/WP8 和 Blackberry 10。 
。 JQ.Plugin 插 件 ， 提供 JQ.Plugin 插 件 ， 以 可 以 使 用 jQuery 和 UI 库 。 同 时 也 支持 jQuery 插 


件 的 
下 面 简 站 
1. 在 页 


书写 模式 ， 为 jQuery 应 用 开发 者 提供 了 便利 。 
描述 如 何 使 用 JQ.Mobi 开 发 移动 应 用 。 
面 中 引入 JS 


01 <!DOCTYPE html> 
02 <html> 


<head> 
<title>UI Starter</title> 
<meta http-equiv="Content-type" content="text/html; 


charset=utf-8"> 


<meta name="viewport" content="width=device-width, 


initial-scale=]1l, maximum-scale=1"> 


<meta name="apple-mobile-web-app-capable" content="yes" /> 
<link rel="stylesheet" type="text/css" href="http://cdn.app— 


framework-software.intel.com/2.0/icons.css" 09/> 
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<link rel="stylesheet" type="text/css" href="http://cdn.app— 


framework-software.intel.com/2.0/af.ui.css" /> 


<script type="text/javascript" charset="utf-8" 


src="http://cdn.app-framework-software.intel.com/2.0/appframework.min. 
js"></script> 


<script type="text/javascript" charset="utf-8" 


src="http://cdn.app-framework-software.intel.com/2.0/appframework. 
ui.min.js"></script> 

</head> 

<body> 

</body> 


相关 的 JS 和 CSS 文 件 可 以 直接 引用 其 提供 的 CDN 地 址 ， 也 可 以 从 GitHub 上 下 载 。CDN 地 址 
为 http://app-framework-software.intel.com/cdn.php，GitHub 地 址 为 https://github.com/01org/ 
appframework。 


2. 在 body 中 搭建 最 基本 的 DOM 结 构 
01 <div id="afui"> <!-- 这 是 最 主要 的 容器 ， 指 定 ID 为 afui， 会 自动 加 载 AFUI 主 题 --> 


02 
03 
04 


08 


<!-- 这 是 顶部 导航 --> 


<div id="header"> 


<a href="javascript:$.ui.toggleSideMenu()" class="button" 


style="float :right"> 侧 边 导 航 </a> 
</div> 
<!-- 这 是 内 容 区 域 --> 


<div i 


"content"> 


<!-- 这 是 一 些 页 面 面 板 ， 只 需要 添加 class 为 panne1， 如 果 设 置 为 


09 selected="true" 表 示 这 是 起 始 页 面 ， 每 一 个 窗口 只 能 显示 一 个 面板 --> 


10 


El 
2 
je! 
14 
15 
16 
Ey 
18 
3 
20 
2 
dr 
全 
24 
25 
26 
2 
28 
2 


<div title=' 首 页 !' id="home" class="panel"” selected="true"> 这 里 
是 首页 内 容 </div> 
<div title='js 代 码 ! id="js"” class="panel"> 这 里 是 js 页 面 </div> 
</div> 
<!-- 这 是 底部 导航 ， 以 id="navbar" 来 标识 --> 
<div id="navbar"> 
<div class="horzRule"></div> 
<a href="#home" id='navbar home' class='icon home'> 首 页 </a> 
<a href="#js" id='navbar js' class='icon js'>JS 页 面 </a> 
</div> 
<!-- 这 是 侧 边 导航 ， 如 果 不 需要 可 以 去 掉 ， 以 nav 标 签 来 标识 --> 
<nav> 
<div class='title'> 侧 边 导航 </div> 
<ul> 
让 
<a class="icon home"” href="#home"> 首 页 </a> 
</1i> 
于 
<a class="icon js" href="#js">JS 页 面 </a> 
</E> 
</ul> 
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30 </nav> 
31 </div> 


3. 运行 
把 步骤 1、 步 又 2 中 的 代码 合并 在 一 起 就 可 以 构建 一 个 最 基本 的 应 用 ， 在 10S 手 机 浏览 器 
运行 以 上 代码 ， 效 果 如 图 3.9 所 示 。 


这 里 是 首页 内 容 这 里 是 js 页 面 


图 3.9 JQ.Mobi 运 行 结果 


3.3 CSS 3 UI 框架 


IE 6 的 市 场 份额 在 不 断 地 减少 ， 越 来 越 多 的 开发 者 投奔 CSS 3， 导 致 近年 来 CSS 3 UI 
框架 数不胜数 。 这 其 中 也 有 一 些 非常 优秀 的 框架 ， 如 Normalize.css、Bootstrap、uikit、 
Foundation、HTML 5 Boilerplate、HTML KickStart、Less Framework 等 。 本 节 主 要 介绍 HTML 
5 Boilerplate 和 Less Framework。 


3.3.1 HTML 5 Boilerplate 


HIML 5 Boilerplate 是 一 个 集成 了 非常 多 先进 特性 的 前 端 模板 框架 ， 能 够 帮助 开发 者 快速 
构建 健壮 的 、 响 应 式 的 Web 应 用 和 站 点 。 

HIML 5 Boilerplate 的 核心 是 帮助 开发 Web 应 用 和 站 点 ， 包 括 以 下 几 项 。 

。 一 个 简洁 而 友好 的 移动 HTML 模板，Google 分 析 异 步 化 ， 提 供 触摸 设备 的 图 标 集合 以 


及 其 他 的 几 十 个 额外 的 窍门 和 技巧 。 
。 引入 Normalize.css 库 ，'，Normalize.css 是 一 个 流行 的 HTML 5 重 置 样式 库 ， 包 括 基础 样式 
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重 置 、 媒 体 查询 和 打印 样式 重 置 等 等 。 

引入 Modernizr 库 ， 自 动 检 测 所 有 的 浏览 器 是 否 支 持 HTML 5 的 新 特性 ， 对 于 不 支持 的 
浏览 器 将 提供 优雅 降级 。 

高 性 能 ，HTML 5 Boilerplate 非 常 注重 性 能 ， 其 提供 了 一 套 Apache 的 配置 文件 ， 支 持 
JavaScript 和 CSS 文 件 静态 化 ， 提 供 多 种 方式 的 脚本 压缩 的 打包 方式 ， 包 括 使 用 Grunt 
和 Ant 等 。 


HTML 5 Boilerplate 的 官网 地 址 为 http://HTML 5boilerplate.com/， 目 前 最 新 版 本 为 4.3.0， 


读者 可 以 前 往 官方 下 载 ， 如 图 3.10 所 示 。 


HTML5 太 BOILERPLATE 


The web's most popular 
front-end template 


fast robust, and adaptable wet 


图 3.10 HTML 5 Boilerplate 官 方 下 载 


3.3.2 Less Framework 


布 


Less Framework 是 


个 自 适应 的 CSS 栅 格 系统 ， 提 供 4 种 布局 方式 和 三 套 预 设 的 排版 。4 种 


局 方式 分 别 为 以 下 几 项 。 


默认 布局 : 这 是 一 套 上 默认 的 布局 方式 ，992 像 素 宽度 ， 共 10 个 栅 格 。 对 于 台式 机 、 笔 记 
本 电脑 、 横 向 的 平板 电脑 及 老式 的 浏览 器 ， 按 黄金 比例 左右 分 割 ， 左 侧 6 栏 ， 右 侧 4 栏 。 
平板 布局 : 将 768px 的 屏幕 分 辩 率 分 成 8 栏 ， 主 要 用 于 iPad 和 其 他 一 些 平板 电脑 。 对 于 
一 些 长 文本 ， 直 接 分 割 成 6 栏 并 居中 显示 。 一 些 较 短 的 文本 ， 则 分 割 成 左右 两 列 ， 分 
别 占 4 栏 。 

移动 设备 布局 : 320px 的 移动 平台 ， 如 iPhone、iPod Touch 和 其 他 一 些 流行 的 移动 设 
备 ， 将 320px 分 割 成 三 栏 。 

宽 版 移动 布局 : 对 于 较 大 屏幕 分 辨 率 的 移动 设备 ， 或 者 移动 设备 横向 展示 时 ， 将 采 
用 480px 的 宽度 ， 把 布局 分 成 5 栏 。 


Less Framework 的 官网 地 址 为 http://lessframework.com/， 读 者 可 以 前 往 官方 下 载 ， 如 图 
3.11 所 示 。 


人 Optimize for LS line-height 
Trpography prorets bazed on 16 pu tost. 
Goodfer onb klke Georsi. 


Optimise jor 1.4 line-height 
Trpography prescts bascdon 17 px tet 
Good for fonts Ee Palatine, 


C Optmize jor 1.33 line-height 
rr 


License: http://opansource. ca/icensez/mit- 
a ee Se 


人 中 
四 

nl, body, div, 和 aq， object, iframe hl, hz, hy, hd, 

5, be, 


了 bleckqote, pre, a, abyr, address, cite, code, eel, 


图 3.11 Less Framework 下 载 


3.4 HTML 5 图 表 库 


HTML 5 图 表 库 主要 是 使 用 HTML 5 技术 实现 绘制 图 表 的 功能 ， 主 要 包括 曲线 图 、 拆 线 
图 、 饼 图 、 环 形 图 、 面 积 图 、 柱 形 图 和 条 形 图 等 。 目 前 HTML 5 图 表 库 非常 多 ， 大 多 数 图 表 
库 所 使 用 的 技术 都 是 采用 HTML 5 的 Canvas 和 SVG， 或 者 用 这 两 者 的 结合 来 绘制 图 表 。 本 节 将 
通过 两 个 非常 典型 的 例子 来 说 明 一 般 的 图 表 库 的 使 用 ， 第 一 个 是 Raphael 图 表 库 ， 第 二 个 是 里 
里 大 名 的 Highcharts 。 


3.4.1 Raphael 


Raphael 是 一 个 小 型 的 图 表 框 架 ， 很 容易 通过 Web 构 建 矢 量 图 形 。Raphael 使 用 SVG 和 
VML 作 为 构建 图 形 的 基本 技术 ， 通 过 其 对 象 ， 构 建 出 DOM 结 构 ， 因 此 也 可 以 利用 JavaScript 
在 DOM 结 构 上 绑 定 事件 。Raphael 的 目标 是 为 了 提供 一 个 在 Web 非 常 容易 绘制 的 矢量 图 形 ， 
并 且 很 容易 的 运行 在 各 个 浏览 器 上 。Raphael 目 前 支持 的 浏览 器 有 Firefox 3.0+、Safari 3.0+、 
Chrome 5.0+、Operating 9.5+、IE 6.0+。 

以 下 是 一 个 使 用 Raphael 提 供 的 path 方 法 和 animate 方 法 连续 画 HTML 5 这 几 个 字母 的 例 
子 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 
03 <head> 
04 <title>Raphaé1: 画 HTML 5 字母 </title> 
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@ |HTML 5 网 页 下 发 实 由 洋人 


05 <link rel="stylesheet" href="demo.css" media="screen"> 

06 <link rel="stylesheet" href="demo-print.css" media="print"> 

07 <script src="raphael-min.js"></script> 

<!-- raphae1 图 形 库 压缩 脚本 --> 

08 <style media="screen"> 

09 body {background: #333;} 

10 #holder { 

a height: 480px; left: 50%; margin: -240px 0 0 -320px; 

时 2 position: absolute; top: 50%; width: 640px; 

13 } 

14 </style> 

15 </head> 

16 <body><div id="holder"></div></body> 

17 <script> 

18 var HTML5 = [ // 定义 HTML 5 这 几 个 字 的 绘制 路 径 

19 // HTML 5 字母 路 径 数据 省 略 ， 读 者 可 以 参看 本 书 网 络 资源 

20 ]; 

21 window.onload = function () { 

Var r = Raphael ("holder", 800, 600); 
// 新 建 Raphael 实 例 ， 并 设置 宽 高 

2 var h5 = r.path('MO,0L0,02').attr({ // 回执 一 条 路 径 

24 TT: EFF // 填充 色 

25 SErOKe: "mpEEEY // 边框 色 

26 "fill-opacity": .3, // 填充 色 的 透明 度 

2 "stroke-width": 1, // 边框 的 宽度 

28 "stroke-linecap": "round", // 边框 的 线 帆 

29 translation: "100 100" 

30 1); 

31 var i= 0; 

32 Var run = function (keyword){ 

33 h5.animate({path: HTML 5[i]}, 200, 'linear', function(){ 
// Raphae1 提 供 动画 库 

34 ES my 

25 EE // 是 否 已 经 画 完 

36 setTimeout (run, 500) // 暂停 0 .5s 画 下 一 个 字母 

37 1， 

38 ]) 7 

3 下 

40 run () 7 // 执行 逻辑 脚本 

3 

42 </script> 

43 </html> 


。 定义 数组 : 该 示例 首先 定义 HTML 5 这 个 数组 ， 该 数组 为 HTML 5 这 5 个 字 的 矢量 路 
径 。 利 用 animate 方 法 可 以 把 定义 好 的 失 量 路 径 按 动画 的 方式 绘制 出 来 。 

。 path 方 法 : pa 了 th 方法 可 以 接收 一 个 绘制 路 径 和 一 组 配置 信息 ， 在 本 示例 中 ， 先 在 画布 
的 最 左上 角 绘 制 一 个 点 ， 并 填充 为 和 白色， 边框 也 为 白色 的 1 像素 点 。 

。 animate 方 法 : 该 方法 可 接受 多 个 和 参数， 第 1 个 参数 可 接收 一 组 配置 信息 ， 本 示例 中 为 
矢量 路 径 ， 第 二 个 参数 为 动画 时 间 ， 在 200ms 内 ， 把 矢量 路 径 画 出 。 
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上 有 关 Raphael 的 使 用 方法 可 查看 其 AI 文档， 地 址 为 http:/raphaeljs.comy/reference html。 


3.4.2 Highcharts 


Highcharts 与 Raphael 的 最 大 区 别 在 于 ，Highcharts 是 基于 配置 自动 生成 一 个 可 视 数据 图 


洲 


图 、 柱 状 图 、 点 状 图 、 饼 状 图 等 等 。Highcharts 有 几 大 特点 。 


Highcharts 支 持 的 图 表 类 型 非常 多 ， 包 括 直线 图 、 曲 线 图 、 散 状 图 、 区 域 图 、 区 域 曲线 


。 提示 功能 :鼠标 移动 某 个 点 后 ， 可 以 根据 配置 信息 进行 相应 的 文字 提示 ， 并 且 该 文 


字 提 示 是 完全 可 定制 的 。 


。 放大 功能 : 可 以 选中 图 表 的 某 一 个 部 分 进行 放大 ， 以 更 清楚 的 状态 查看 图 表 。 
。 组 合 与 取消 组 合 功能 : 可 以 在 一 个 图 表 上 显示 不 同 维度 的 线 图 ， 可 以 方便 地 隐藏 和 


显示 不 同 维度 的 数据 。 
。 时 间 轴 : 支持 三 维 的 刻度 表示 。 
。 后 端 兼容 : 容易 与 后 端 数据 兼容 ， 使 用 方便 。 


以 下 演示 了 一 个 网 站 的 用 户 增长 曲线 图 ， 完 整 代 码 请 参考 光盘 
脚本 代码 如 下 : 


01 define (function (equire， exports, module){ 


录 3.4.2 代 码 部 分 ， 关 键 


02 var $ = require('jQuery'), // 引入 JQuery 类 库 模 块 
03 venus = require('venus'), // 引入 venus 类 库 模块 
04 ui = require('ui'), // 引入 ui 类 库 模 块 
05 container = document .getElementById("container"); 
06 Var svg = { 
07 lineData: []， // x、y 轴 名 称 
08 timeDiff: {}, // 获取 数据 的 时 间 段 
09 lineOption : { 
10 width: 700, 
1 height: 400, 
12 axis: { // 坐标 系 x、y 轴 数据 
Hi cee 
14 opposite: false, // 是 否 跟 默认 位 置 相反 
15 tickWidth: 70, 
// 设置 x 轴 坐标 点 是 否 出 现 占 位 符号 和 其 宽度 
16 tickese Droe TD nr Mr a OH 
err T89710] 
17 }, 
18 Vestf 
19 min: 0 // y 轴 最 小 值 
20 } 
之 让 ]}， 
ee icons: { 
23 0: “circle’ // 间隔 点 图 形 
24 ]， 
25 ne 三 
26 smooth: true, // 曲线 是 否 平滑 
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CIHTML samen ee 


27 dotRadius: 5 // 曲 度 
28 ]， 
Et ) acid (ty 
30 }v 
3 _getData : function(callback){ // 从 后 台 服 务 获取 数据 
2 Var self = this; 
33 $.post("api get user total.php", self.timeDiff, 
function(res){ 

34 var data = $.parseJSON (res); 

// 将 数据 转 为 JSON 格 式 
35 callback && callback (data); 
36 PD 
37 }, 
38 _setData: function(data){ // 填充 图 标 数据 
39 Var self = this, arr = []，time = []; 
40 data.forEach (function(1, i){ 
41 time.push(l1.time); 
42 arL.push(1.total) 7 
43 Hs. 
44 self.lineData = [{name: 0, data: arr}]; 
45 self.lineOption.width = arr.length * 70; 
46 self.lineOption.axis.x.ticks = time; 

// z 轴 数据 
47 }， 
48 _show: function(){ // 输出 图 形 
49 Var self = this; 
50 container.innerHTML = ''; // 清空 容器 
二 下 new Venus .SvgChart (container, self.lineData, 

self.lineOption); 

52 }， 
53 run: function(){ // 执行 绘制 
54 Var self = this, 
55 cb = function(data){ 
56 self._ setData (data); 
5 self._show(); 
58 } 
59 this. getData (cb); 
60 ]}v 
61 render: function(startTime, endTime){ // 绘制 图 形 
62 this.timeDiff.startTime = startTime || ''; 
63 this.timeDiff.endTime = endTime || ''; 
64 this. run()s 
65 } 
66 }; 
67 exports.svg = svg; // 设置 模块 对 外 接口 
68 1); 


该 程序 运行 效果 如 图 3.12 所 示 。 
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开始 时 间 : [201302.26 回 ] 结束 时 间 : [2013-03-06[e 


0 和 - 
02-26 0227 0228 0301 0302 0303 0304 0305 0306 


图 3.12 用 户 增 长 曲线 


3.5 游戏 库 一 一 Three.js 的 使 用 


随 着 HTML 5 的 流行 ， 使 用 JavaScript 来 写 游戏 逐渐 变 得 可 能 。 基 于 HTML 5 而 发 展 起 来 的 
游戏 库 也 越 来 越 多 ， 如 提供 2-D 模 型 的 GMP 游 戏 引 擎 、 使 用 Canvos 和 DOM 的 Collie 游 戏 库 、 
以 WebGL 或 Canvas 作 为 泻 染 引 擎 的 Threejs 游 戏 库 等 等 ， 这 些 游 戏 库 有 一 个 共同 的 特点 ， 都 是 
基于 HTML 5 的 技术 。 本 节 主 要 通过 Three.js 这 个 游戏 库 来 分 析 游戏 引擎 是 怎么 工作 的 。 

Three.js 是 一 个 伟大 的 、 开 源 的 、 以 WebGL 作 为 泻 染 引 擎 的 JavaScript 框 架 ， 利 用 HTML 
5 的 Canvas 可 以 绘制 出 3-D 模 型 ， 使 用 Three.js 可 以 在 浏览 器 上 可 以 实现 真正 的 3D 效 果 。 使 
Three.js 分 为 6 个 基本 步骤 ， 分 别 是 : 

(1) 设置 泻 染 器 。 

(2) 设置 相机 Camera。 

(3) 设置 场景 Scene。 

(4) 设置 光源 Light。 

(5) 设置 物体 Object。 

(6) 设置 动画 旋转 。 


以 下 是 一 个 使 用 Three.js 的 例子 ， 读 者 可 以 把 代码 保存 为 threejs-demo.html， 在 Chrome 浏 


览 器 中 运行 。 
01 <html> 
02 <head> 
03 <title>My first Three.js app</title> 


04 <style>canvas { width: 800px; height: 600px;}</style> 


QH sna =©Q0—0\"O 上 央 天 ©®©®©®S 有 So 一 =~ , 


05 </head> 
06 <body> 
07 <script src="https://rawgithub .com/mrdoob/three.js/master/build/ 
three.js"></script> 
08 <script> 
09 // 1、 设 置 泻 染 器 
10 Var renderer = new THREE.WebGLRenderer({antialias:true}); 
// 生成 泻 染 器 对 象 属性 ， 句 齿 效 果 设 为 true 
a renderer.setsize (800, 600); // 设置 浑 染 器 的 宽 和 高 ， 和 画布 大 小 一 至 
12 document .body.appendChild (renderer.domElement); 
// 追加 canvas 元 素 到 body 元 素 当中 
13 renderer.setClearColor (OxFFFFFF, 1.0); // 设置 演 染 器 的 清除 色 
14 // 2、 设 置 摄像 机 
15 Var camera = new THREE.PerspectiveCamera(45, 800/600, 1, 1000); 
16 // 此 处 为 设置 透视 投影 的 相机 ， 默 认 情 况 下 ， 相 机 的 上 方向 为 Y 轴 ， 右 方向 为 x 轴 ， 沿 着 


z 轴 垂直 朝 里 (视野 角 : fov; ”纵横 比 : aspect; ”相机 离 视 体 最 近 的 距离 :near; 
相机 离 视 体 最 远 距 离 : far) 


iy camera.position.x = 400; // 设置 相机 的 位 置 坐标 

18 camera.position.y = 07 

LR camera.position.z = 0; 

20 camera.up.x = 07 

2 camera.up.y = 1; // 设置 相机 上 方向 为 y 轴 

camera.up.z = 07 

23 // 3、 设 置 场景 

24 Var Scene = new THREE.Scene(); 

25 // 4、 设 置 光 源 

26 var light = new THREE.DirectionalLight (OxFFFFFF, 1.0, 0); 
// 设置 平行 光 DirectionalLight 

27 light.position.set (50, 50, 50); // 光源 向 量 ， 即 光源 的 位 置 

28 scene.add (light); // 追加 光源 到 场景 

29 // 5、 设 置物 体 

30 Var geometry = new THREE.CubeGeometry(50, 50, 50); 
// 形状 〈 宽 高 深度 ) 

3 下 Var material = new THREE.MeshLambertMaterial({color: 0Xff3300}) 7 
// 材质 

本 Var cube = new THREE.Mesh(geometry, material); 

33 scene.add (cube); 

34 // 6、 设 置 动 画 旋转 

35 Var 七 = 07 

36 var render = function () { // 动画 绘制 

3 七 二 十? 

38 renderer.clear (); // 清空 画布 

39 cube.rotation.set (0, t/100,0); 

40 camera.lookAt ({x:0,y:0,2:0}); 

41 renderer.render (scene，camera);  // 演 染 物体 和 相机 

42 requestAnimationFrame (ender) 7 

43 } 

44 render (); 

45 renderer.clear () 7 

46 renderer.render (scene, camera); 

47 /script> 
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48 </body> 
49 </html> 


本 例 运 行 结果 如 图 3.13 所 示 。 


图 3.13 光源 从 左 侧 照 到 物体 上 的 3D 效 果 


本 章 主要 介绍 了 HTML 5 的 一 些 概念 、 框 架 及 其 简单 的 使 用 。 响 应 式 网 
设计 哲学 已 经 被 越 来 越 多 的 开发 者 所 关注 ， 一 些 较 大 的 网 站 也 已 经 实现 了 


站 的 设计 理念 和 
全 站 响应 式 ， 如 


“一 淘 ” 网 。 至 于 使 用 响应 式 设计 是 增加 了 成 本 还 是 降低 了 成 本 ， 也 因 网 站 和 团队 而 异 ， 因 


此 是 否 使 用 响应 式 ， 需 要 根据 自身 团队 情况 进行 衡量 。2013 年 是 移动 互联 网 


电位 看 得 比 传统 的 PC 还 要 重 。 随 着 HTML 5 技术 的 成 熟 ， 越 来 越 成 熟 的 图 表 


爆发 的 上 升 期 ， 


国内 一 些 大 网 站 也 把 移动 互联 网 作为 企业 的 重要 战略 之 一 ， 有 些 大 企业 甚至 把 移动 互联 网 的 


库 、3D 库 、 游 戏 


库 频频 出 现 ， 使 得 前 端 开 发 人 员 可 以 玩 转 更 多 更 酷 的 技术 。 
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4. 


开发 人 员 在 


| 


芋 髓 
(33 


环境 搭建 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”， 使 用 优秀 的 工具 可 以 帮助 开发 者 提 
高 效率 。 本 章 将 介绍 本 书 示 例 中 所 使 用 的 开发 工具 和 开发 环境 。 读 者 还 
可 以 从 本 章 学 习 到 Node.js ( 一 个 使 用 Google 高 性 能 V8 引擎 的 服务 器 端 
JavaScript 实 现 的 解释 器 ) ， 同 时 还 能 学 到 前 端 最 流行 的 类 库 jQuery， 
并 了 解 浏览 器 前 端 实战 开发 时 所 使 用 的 技巧 ， 最 后 ， 还 会 介绍 使 用 
Fiddler 用 作 HTTP 请 求 代理 来 加 速 前 端 开发 。 现 在 ， 让 我 们 来 一 起 感受 
强大 的 工具 所 带 来 的 前 端 开发 体验 吧 。 

本 章 知 识 点 : 


。 适用 HTML 5 的 编辑 器 

。 如 何 使 用 Node.js 

。 jQuery 框架 

。 使 用 Chrome 浏 览 器 调试 脚本 


1 选择 一 款 编辑 器 


前 端 开发 工作 之 前 ， 选 择 一 款 合 适 的 编辑 器 是 非常 关键 的 一 步 。 很 多 初 


学 者 ， 常 常 使 用 一 


功能 较 如 


日 、 体 积 巨 大 的 开发 工具 作为 前 端 编辑 器 ， 如 Eclipse、Microsoft 


Visual Studio、Adobe Dreamweaver 等 。 其 实 ， 现 在 市 面 上 有 很 多 体积 轻巧 ， 但 功能 非常 强大 


的 编辑 器 供 选择 ， 下 面 罗列 一 些 比较 优秀 的 适用 于 前 端 开发 的 编辑 器 供 读者 参考 。 


4.1.1 Notepad++ 编 辑 器 


Notepad++ 是 一 款 Windows 环 境 下 免费 开源 的 代码 编辑 器 ， 图 4.1 为 Notepad++ 编 辑 器 截图 。 


图 4.1 Notepad++ 编 辑 器 
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Notepad++ 编 辑 器 内 置 支持 JavaScript、C++、Java 等 27 语 法 高 亮 显示 


等 功能 ， 自 动 检测 又 
件 类 型 ， 根 据 语 法 节点 自由 折 倒 或 者 打开 代码 ， 还 可 以 支持 如 宏 功 能 、 揪 件 扩展 等 ， 项 


管 于 SourceForge.net 之 上 。 


4.1.2 _ UltraEdit 编辑 器 


UltraEdit 也 是 Windows 的 一 款 流行 的 老 
人 台 ， 名 为 UEX (全 称 UltraEdit for Linux) ， 


牌 文本 编辑 器 ， 同 时 该 款 编辑 器 被 移植 到 Linux 平 
图 4.2 为 UltraEdit 编 辑 器 截 


a. 志 之 色 . 习 豆 
Po PE PT 


weevilll i 


3 
§ 


nL Col CD 


PTTTT TTYEEETP PES HA Ek 二 二 二 下 
For pelp, 


Mod: 2010/3/19 140104 Fe size 0 INS 


图 


4.2 UltraEdit 编 辑 器 

UltraEdit 编 辑 器 可 以 编辑 文本 、 十 六 进 制 、ASCII 码 ， 打 开 的 文档 大 小 不 受 限 制 ， 即 使 
是 数 兆 字 节 的 文件 也 只 占用 最 小 限度 内 存 ， 即 便 如 此 ， 该 款 编辑 器 文件 打 
的 ， 是 一 款 非 常 优秀 的 编辑 器 。 


速度 还 是 飞快 
4.1.3 Sublime Text 2 编辑 器 
笔者 目前 使 用 的 编辑 器 名 为 Sublime Text 2， 除 了 拥有 普通 编辑 器 具备 的 语法 高 亮 、 代 
码 提示 补 全 、 代 码 折 又 、 自 定义 皮肤 、 配 色 


、 多 便签 页 的 功能 之 外 ， 还 拥有 非常 棒 的 代码 地 
、 多 种 界面 布局 与 全 屏 免 打扰 模式 功能 ， 图 4.3 为 Sublime Text 2 编辑 器 的 截图 。 


EE \hello. txt » - Subline Tert 2 (UNREGISTEREDY 


File Edit Selection Find Wisew Goto Tools Projsct Preferences Help 


到 4.3 Sublime Text 2 编辑 器 
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Sublime Text 2 除了 上 面 介绍 的 功能 之 外 还 有 扩展 包 管 理 器 、 功 能 强大 的 命令 面板 、 切 换 为 
VIM 操 作 等 ， 由 于 功能 实在 太 多 ， 不 再 过 多 介绍 ， 下 面 列 出 该 款 编辑 器 最 受 欢迎 的 几 点 原因 : 


。 可 随意 转 到 任何 地 方 。 

多 重 选择 。 

命令 调 色 板 。 

免 打扰 模式 。 

分 离 编 辑 。 

即时 专案 开关 。 

插件 API。 

自 定义 任何 东西 。 

跨 平 台 (OS 义 、Windows、Linux) 。 


读者 可 以 前 往 官网 地 址 http://www.sublimetext.com/ 下 载体 验 。 


4.2 Node.js 


Node.js 自 从 被 推出 以 来 ， 就 一 直 受 到 前 端 开发 工程 师 的 关注 ， 因 为 开发 者 可 以 只 使 用 一 
语言 JavaScript 就 能 完成 所 有 的 前 、 后 端的 开发 工作 。 下 面 罗列 了 整个 Nodejs 迅 速 崛起 的 发 展 
下; 


。 2009 年 2 月 ，Node.js 作 者 Ryan Dahl 在 博客 上 宣布 准备 开始 开发 工作 。 
。 2009 年 5 月 ，Ryan Dahl 在 GitHub 上 发 布 了 最 早 的 Node.js 版 本 。 

。 2009 年 11 月 ，JSConf 大 会 邀请 Ryan Dahl 做 Node.js 讲 座 。 

。 2010 年 4 月 ，JSConf 大 会 再 次 邀请 Ryan Dahl 做 Node.js 讲 座 。 


2010 年 底 ，Node.js 获 得 云 计 算 服 务 商 Joyent 资 助 。 
2011 年 7 月 ，Node.js 在 微软 的 支持 下 发 布 Windows 版 本 。 


接 下 来 ,一 同感 受 Nodejs 所 带 来 的 新 奇 开发 体验 吧 。 
4.2.1 Node.js 介 绍 


相信 很 多 关心 前 端的 读者 ， 已 经 在 大 量 的 文章 和 技术 周刊 上 看 到 关于 Node.js 的 报道 和 新 
闻 ， 那 么 首先 要 明确 的 是 “Node.js 到 底 是 什么 呢 ? ”。Node.js 是 服务 器 端 JavaScript 的 解释 
器 ， 也 就 是 说 是 可 以 通过 JavaScript 操 作 系统 级 别 的 功能 。 

按照 官方 的 解释 ，Node.js 是 一 个 可 以 轻松 构建 和 可 扩展 的 网 络 应 用 平台 ， 该 平台 基于 
Chrome 的 JavaScript 运 行 环境 。Nodejs 有 如 下 几 个 特点 : 


。 事件 驱动 。 
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。 非 阻 塞 JO 模 型 。 

。 单线 程 。 

。 基于 V8 引 擎 。 

前 面 提 到 Node.js 基 于 V8 引 擎 ， 实 际 上 是 对 V8 引 擎 的 封装 和 特定 场景 的 优化 ， 那 么 V8 是 
什么 ? V8 是 谷歌 用 于 Chrome 浏 览 器 的 底层 JavaScript 的 引擎 ， 运 行 前 将 JavaScript 编 辑 成 机 器 
代码 ， 提 高 运行 性 能 。 

Node.js 经 过 近 几 年 的 发 展 ， 已 经 有 大 批 的 优秀 企业 使 用 了 该 技术 开发 应 用 ， 如 全 球 最 大 
的 职业 社交 网 站 LinkedIn 使 用 Node.js 作 为 移动 服务 器 后 台 基 础 ， 使 其 应 用 中 服务 器 通信 性 能 
大 大 提升 ， 完 胜 基于 Ruby on Rails 技 术 方案 。 在 国内 ， 淘 宝 也 使 用 Nodejs 开 发 了 MyFOX， 一 
个 数 
使 


十 


数据 处 理 中 间 件 ， 用 于 从 一 个 MYSQL 集群 中 读 取 数 据 ， 并 计算 出 统计 结果 返回 和 输出。 大 家 
Nodejs 的 理由 都 是 基于 自身 的 特点 和 卓越 的 性 能 表现 ， 是 否 很 有 兴趣 在 日 常 开发 的 项 目 
使 用 Nodejs? 那 就 快 行动 起 来 ， 一 同体 验 前 后 端 统一 开发 语言 的 时 代 。 


了 TH 


4.2.2 Node.js 安 装 


通过 前 面 的 介绍 ， 相 信 读 者 对 Node.js 已 经 有 初步 的 了 解 ， 接 下 来 ， 本 节 将 介绍 Windows 
环境 下 的 Node.js 安 装 。 
首先 ， 去 Node.js 官 网 (http://nodejs.org/〉 下 载 安装 包 ， 图 4.4 为 官网 下 载 页 


13-x86,n 


Windows Installer (.msi) 


Windows Binary (.exe) 


Mac OS X Installer (.pkg) 


Mac OS X Binaries 


(.tar.gz) 
Linux Binaries (.tar.gz) 
Sunos Binaries (.tar.gz) 


Source Code 


图 4.4 Node.js 官 方 下 载 


这 里 按照 笔者 的 机 器 环境 配置 ， 选 中 “Windows Installer (.msi) 64-bit” 安 装 包 ， 当 前 
Node.js 的 版 本 是 v0.10.12， 下 载 后 的 是 “node-v0.10.12-x64.msi” 安 装 程序 。 

(1) 双击 该 安装 包 ， 出 现 安装 提醒 界面 ， 单 击 Next 按 钮 ， 执 行 下 一 步 安 装 操作 ， 如 图 
4.5 所 示 。 


账 
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CH mnxxmm ee 


Welcome to the Node.js Setup Wizard 


站 利和 人 全 Mao me ok 


图 4.5 欢迎 界面 


(2) 选中 I accept the terms in the License Agreement 复 选 框 ， 并 单 击 Next 按 钮 进入 下 一 
步 ， 如 图 4.6 所 示 。 


e persons tn Whom the Software 1 fumished to do so ubjert to 
ine flnwinn conelitnne 图 


图 4.6 安装 协议 


(3) 默认 安装 目录 为 “C:\Program Filesmodejs\”， 确 认 后 继续 单 击 Next 按 钮 执行 下 一 
步 ， 如 图 4.7 所 示 。 


Choose a custom location or cick Next to instal nedes 


图 4.7 确认 安装 目录 
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(4) 进入 自 定义 安装 页 面 ， 黑 认为 全 部 选中 ， 其 中 Node Package Manager 是 Nodejjs 的 套 
件 管理 工具 ， 后 续 会 做 进一步 的 介绍 。 继 续 单 击 Next 按 钮 进入 正式 安装 ， 如 图 4.8 所 示 。 


Bode. js Setup 
Custom Setup RS 
Select the way you want Features to be nstaled. nedea 


图 4.8 自 定义 组 件 安装 界面 
(5) 单 击 安装 准备 界面 的 Install 按 钮 ， 开 始 安装 Nodejs， 如 图 4.9 所 示 。 


图 4.9 安装 准备 界面 
(6) 安装 程序 开始 进行 Nodejs 的 安装 ， 如 图 4.10 所 示 。 


图 4.10 正在 安装 Nodejs 
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consol 


下 面 验证 Node.js 是 否 真 的 安装 成 功 。 先 进入 目 
“hello world.jjs”， 代 码 如 下 : 


安装 完毕 后 ， 出 现 如 图 4.11 所 示 的 界面 ， 表 示 安 装 成 功 。 


Brisss SN 


Completed the Node.js Setup Wizard 
> 
nedes 


Node-js has been successfuly instaled, 


CE Er | 


图 4.11 Nodejs 安 装 成 功 


录 “C:\Program Filesmodejs”， 新 建文 件 


e.log("hello world") 7 


打开 Windows 命 令 窗 


world.js"”， 


口 ， 进 入 “C:\Program Files\nodejs” 
输出 效果 如 图 4.12 所 示 。 


录 ， 执 行 代 码 “node "hello 


站 cr \Windovs\systen32\end xe 


图 4.12 “hello world.js” 示 例 输 出 效果 


确认 Node.js 已 经 安装 成 功 ， 读 者 如 果 觉 得 示例 代码 不 过 净 ， 可 以 使 用 官网 提供 的 示例 进 


一 步 体验 Node:js 开 发 的 便捷 。 


4.2.3 使 用 Node.js 的 NPM 


NPM 全 称 Node Package Manager， 是 Node.js 的 模块 管理 工具 


者 卸载 共享 在 


[ 具 ， 通 过 使 用 NPM 可 以 安装 或 


网 络 上 的 程序 包 ， 同 时 个 人 也 可 以 发 布 


在 使 


npm 一 V 


己 的 程序 包 到 NPM 供 他 人 使 


之 前 ， 首 先 检 查 NPM 是 否 正确 安装 ， 打 开 Windows 命 令 提 示 工 具 ， 执行 代码 如 下 ; 


// 或 者 npm --version 


出 现 图 4.1 


3， 表 示 NPM 安 装 成 功 ， 笔 者 当前 的 NPW 版 本 号 是 1.1.45。 
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EC: \WINDOYS. O\systen32\cnd exe 


ft Corp- 


C:\Documents and Settings hdninistrator>npm ~u 
.1.45 


到 4.13 _ NPM 安装 成 功 


NPM 目 前 拥有 35 631 个 程序 包 ， 读 者 可 以 通过 使 用 官网 (https://npmjs.org/) 进行 查询 。 
下 再 ee 框架 Express 程 序 包 的 安装 过 程 。 


(1) 打开 Windows 命 令 提 示 工 具 ， 执 行 如 下 代码 : 


npm search express 


F 是 首次 进行 搜索 ， 所 以 NPM 会 先 提示 下 载 官 网 上 注册 程序 包 的 索引 集合 ， 如 图 4.14 


所 示 。 


NDocunents 
Buil " 3 ase be patient 


图 4.14 NPM 搜 索 


待 下 载 完毕 后 ， 会 出 现 一 堆 与 Express 程 序 包 相关 的 项 目 提示 ， 如 图 4.15 所 示 。 


11 nodule that snoothe: 
pup-niddleware apup Middl for connect. 
sf lash-c ginite’s veb-so js Flash client shin re 


pla 


Winston an| 


ript nininalist 


pt nininalist interface to 


x Layout & Partial support. 


ngs \Adninist 


到 4.15 搜索 Express 提 示 


(2) 进行 Express 模 块 安装 ， 执 行 如 下 代码 : 
npm install express 


NPM 开 始 从 远程 服务 器 下 载 Express 相 关 安 装 代码 ， 如 


哆 


4.16 所 示 。 
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到 4.16 NPM 开 始 从 远程 服务 器 下 载 Express 相 关 安 装 代码 


(3) 下 载 结束 后 ，“C:\Documents and Settings\Administrator” 文 件 夹 会 多 出 一 个 名 为 


“node_modules” 的 文件 夹 ， 里 


加 


存放 了 刚才 下 载 的 express 和 其 相关 的 依赖 程序 包 。 


棍 Express 是 一 个 简洁 而 灵活 的 Node.js 下 Web 应 用 框架 ， 提 供 一 系列 强大 特性 帮助 创建 各 种 Web 
去 应 用 ， 丰 富 的 HTTP 工 具 以 及 来 自 Connect 框 架 的 中 间 件 随 取 随 用 ， 创 建 强健 、 友 好 的 API 变 
得 快速 又 简单 。Express 不 对 Node.js 已 有 的 特性 进行 二 次 抽象 ， 只 是 在 其 之 上 扩展 了 Web 应 用 


所 需 的 功能 ， 官 网 地 址 为 http://expressjs.com/。 


之 前 已 经 介绍 过 ，NPM 除 了 可 以 下 载 使 用 他 人 远程 共享 的 程序 包 ， 同 时 也 可 以 发 布 自己 


的 程序 包 ， 下 面 将 演示 如 何 发 布 自己 的 程序 包 。 


(1) 前 往 官网 https://npmjs.org/signup 注 个 账号 。 


(2) 在 本 地 计算 机 分 区 ， 此 处 为 D 盘 上 新 建文 件 夹 命名 为 npw， 


于 发 布 测试 ， 在 


Windows 命 令 行 工具 执行 hpm init 代 码 创 建 程序 包 ， 创 建 期 间 NPM 会 出 现 多 次 提示 输入 信息 ， 


为 了 便于 测试 ， 这 里 只 填写 了 第 一 项 nameff 
如 图 4.17 所 示 。 
提 


\ “html5-test”。 


为 “html5-test”， 表 示 该 程序 包 的 发 布 名 称 ， 


请 注意 NPM 的 程序 包 名 称 有 具有 唯一 性 ， 读 者 必须 使 用 没有 被 占用 的 名 称 ， 本 例 测试 名 为 


npn?npm in 让 
rhis utility will walk 
It only 


vers the most connon 


"npm help for 


land exactly what th 


json 
do- 
和 se “npn install <pkg 
ave it as a dependency in the 


press ^C at any tine to quit. 
npn) htnl15 
bersion: ‘0.8.0) 


ldescription: 


hane: test 


e to D: npn\pac: 


“de 
script: 
"test 


ription" 
index. 


"repositor. 
“author" 


"lice “EspD" 


ok? Cyes) yr 
htnlS-te 


图 4.17 


(3) 程序 包 创建 
如 


的 账号 ， 14.18 所 示 。 


ynpm adduser 


ne: zhouyao 

vord: 

Enail: wao -zhouedianping-com 
https://registry. 
http 
http: 
http -npnj 
https://registry.npn. 

aeab939B6e?24e347bhaf8B9aB86d49d 

pn http 

agab93986e724e347baf 869a888d49d 


npnj 
gistry 


you through cr 


def initive docunentation on 


age -js 


t 


创建 属 


成 功 以 后 ， 执 行 npm adduser 命 令 添加 


gistry-npnjs 


到 4.18 添加 4 
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ating a package.json file- 


itens, and tries to guess sane defaults. 


these fields 


”afterwards to install a package and 


package .json file 


on: 


: No README.nd file foundt", 


st specified\" 8& exit 1 


te0.0.90 No README.nd file foundy 


包 


于 自己 的 程 ) 


发 布 用 户 ， 按 提示 二 


.org r/org.couchdb. 
org/ 
org 


-org, 


g.couchdb 
-couchdb. 
-couchdh 
-couchdh 


or yao/ -rev/9-5| 


org -couchdh yao/ -rev/9-5| 


(4) 执行 Ipm publish 命 令 进 


p: npn>npn publish 
ARN| htnlS-tes 
registry. 
registry. 
regist 
registry. 
registry. 
registry. 
registry. 
registry. 


98h299Bde2， 
on 
98h299Bde2 


4878fa83d36F86377827 
https://regist 
a83d36F86377 


图 4.19 执行 hpm publish 命 令 进行 远程 


井 行 远程 发 布 ， 如 


ee- 


8-1 No README.nd file 
PgAhtmli 
orgyhtnl 


fo 


rg/htnl 
rg/htnl 
rg/htnl 8-0.1 


.8.1/ 


tag/lat 
rg/htnlS-te 
rg/htnlS-t 

rg/htnlS-te 
te 


tag/latest 


rg/htnl5 


rg/htnlS-te 
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(5) 发 布 成 功 后 ， 可 以 登录 网 站 https://npmjs.org/ 搜 索 刚 刚 发 布 的 “html5-test” 程 序 
包 ， 或 者 通过 命令 “npm search html5-test”。 


此 外 ， 用 户 还 可 以 进行 项 目 远 端 删除 ， 命 令 如 下 : 


npm unpublish -force 
4.2.4 如 何在 Nodejs 中 调试 


调试 代码 是 软件 开发 中 必 不 可 少 的 组 成 部 分 ， 快 速 地 调试 可 以 帮助 开发 人 员 迅 速 地 查找 
和 人 解决 问题 。 本 节 将 向 读者 介绍 Node.js 中 的 两 种 调试 方法 : 内 置 调 试 器 和 基于 Chrome 浏 览 器 

1. 内 置 调 试 器 

内 置 调试 有 点 类 似 于 网 页 开发 中 向 代码 添加 关键 词 debugger 的 方法 ， 比 如 在 Chrome 浏 览 
器 开发 者 工具 中 的 JavaScript 控 制 台 输入 如 下 代码 : 


Var a=17 
debugger; 


JavaScript 控 制 台 代码 如 图 4.20 所 示 。 


Elements Resources Network Sources Timeline Profiles Audits JGonsole| x 


> var a=l; 
debugger; 


SB, A © dopfnme> vv <pagecontext> 交 


图 4.20 JavaScript 控 制 台 


按 Enter 键 执行 代码 ，Chrome 进 入 调试 模式 ， 如 图 4.21 所 示 。 


Elements Resources Network | Sources| Timeline Profiles Audits Console WW 
四 | (vM] (4509) x 四川 A++ Paused 
LT with ((uindou aa window. console a window.console. connandlineAPI) [| {}) € | Watch Expressions +e 
i 
4 » Scope Variables 
5 » Breakpoints 
* DOM Breakpoints 
上 XHR Breakpoints + 
» Event Listener Breakpoints 
¥ Workers 


B/E a @ Unel coumnli 次 
图 4.21 Chrome 调 试 模式 

Nodejs 的 内 置 调试 使 用 的 也 是 类 似 的 方法 ， 下 面 介绍 如 何 运 行 Node.js 的 内 置 调试 。 

(1) 在 文件 夹 “D:npm” 中 新 建 名 为 “appjs” 的 文件 ， 代 码 内 容 如 下 : 


var a=ls 
debugger; 
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(2) 打开 Windows 命 令 行 工 具 进 入 文件 来 “D:mpm”， 执 行 如 下 命令 运行 脚本 : 


node debug app.js 
脚本 代码 执行 成 功 后， 效果 如 图 4.22 所 示 ， 表 示 进 入 调试 状态 。 


(3) 输入 命令 n， 按 Enter 键 执行 下 一 步 ， 此 时 脚本 文件 中 的 第 一 行 代码 被 执行 ， 如 
4.23 所 示 。 


网 


le debug app-js 
listening on 


ing on port 5858 


到 4.22 脚本 代码 执行 成 功 到 4.23 输入 字符 0 执行 下 一 步 


(4) 输入 命令 repl， 按 Enter 键 进入 脚本 调试 器 的 上 下 文 交互 式 结果 查看 状态 ， 如 图 4.24 


所 示 。 


(5) 输入 a 表示 显示 当前 脚本 上 下 文中 的 变量 a 的 值 ， 按 Enter 键 执行 ， 调 试 器 给 出 a 的 值 
为 1， 如 图 4.25 所 示 。 


+ C to leave debug repl 


到 4.24 脚本 调试 上 下 文 交互 式 结果 查看 状态 到 4.25 输入 并 显示 变量 “a” 的 值 


原生 的 内 置 调试 器 除了 刚才 使 用 的 命令 h、repl 外 ， 还 提供 了 其 他 非常 丰富 的 功能 ， 命 令 
列表 使 用 说 明 如 表 4.1 所 示 。 


表 4.1 内 置 调 试 命令 列表 


命令 说 明 

run 表示 运行 脚本 调试 器 启动 自动 运行 )， 可 缩写 为 + 
cont 表示 继续 执行 ， 直 到 遇 到 下 一 个 断 点 ， 可 缩写 为 c 
next 表示 单 步 执 行 ， 可 缩写 为 n 

step 进入 函数 ， 可 缩写 为 s 

out 表示 单 步 跳出 函数 ， 可 缩写 为 

backtrace 表示 打印 当前 执行 蛋 的 回 滴 ， 可 缩写 为 bt 
setBreakpoint 表示 设置 断 点 ， 默 认为 当前 行 ， 可 缩写 为 sb 
clearBreakpoint 表示 移 除 断 点 ， 可 缩写 为 cb 

watch 表示 添加 表达 式 观 察 列表 

unwatch 表示 移 除 观察 列表 的 表达 式 
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( 续 表 ) 


命令 


watchers 


| list | 表示 列 出 脚本 源 代码 某 行 的 上 下 文 〈 该 行 的 前 后 ) 
表示 列 出 所 有 加 载 脚本 
表示 断 点 于 异常 出 现 


breakpoints 表示 列 出 所 有 断 点 信息 
version | 表示 显示 V8 引擎 版 本 


2. Chrome 浏 览 器 


另外 一 种 调试 Node.js 的 方法 为 Chrome 浏 览 器 调试 ， 这 里 将 用 到 程序 包 node-inspector， 首 
先 在 Windows 命 令 行 工具 中 执行 命令 将 程序 包 安 装 在 全 局 环境 下 ， 命 令 如 下 : 


npm install -g node-inspector 
安装 完毕 后 ， 继 续 执行 node-inspector， 启 动 该 服务 ， 命 令 如 下 : 
I 下 node-inspector 


如 果 提 示 “warn 一 error raised: Error: listen EADDRINUSE”， 表 示 默 认 的 8080 端 口 已 经 被 占 
用 ， 可 以 通过 命令 “node-inspector -web-port= 新 端口 号 ”来 指定 一 个 未 被 占用 的 端口 。 


node-inspector 启 动 成 功 后 ， 会 提示 用 户 调试 页 面 地 址 ， 如 图 4.26 所 示 。 


注 


4.26 node-inspector 启 动 成 功 


此 时 node-inspector 正 在 监听 $858 调 试 端口 ， 打 开 Windows 命 令 行 工 具 进 入 目录 “DA:\ 
npm”， 继 续 使 用 之 前 的 测试 文件 app.js， 代 码 如 下 ; 


Var a=]17 
debugger; 


i 
执行 命令 如 下 : 
node --debug-brk=5858 app.js 


运行 成 功 后 提示 debugger listening on port 5858。 打 开 Chrome 浏 览 器 ， 进 入 “node- 
inspector” 调 试 地 址 “http://127.0.0.1:8080/debug?port=5858”， 页 面 如 图 4.27 所 示 。 


Ed 
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|Sources| Console 


四 appjs x El A + Paused 
(Function (exports, reauire, nodule, fFilenane, dirnane) 《 Var asli  » Watch Expressions +e 
2 debugger; ¥ Call Stack 

31)); 


Scope Variables 
vwLocal 


dirnane: pm 


"D: \n 
AN 


ss: Object 
> module: Module 
prequire: function require- 
* this: Object 


> Global Dbject 
» Breakpoints 

» DOM Breakpoints 

» XHR Breakpoints + 


上 Event Listener Breakpoints 


2 四 { Line2 column10 £3 
图 4.27 node-inspector 调 试 状态 
相 比 较 两 种 调试 方法 ， 笔 者 更 偏向 于 使 用 node-inspector， 该 方法 更 接近 于 传统 的 浏览 器 


未 node-inspector 通 过 WebSocket 将 调试 信息 反馈 给 浏览 器 ， 用 于 打开 的 浏览 器 必须 支持 HTML 5 
史 的 WebSocket 功 能 ， 本 节 使 用 Chrome 浏 览 器 打开 。 


4.2.5 使 用 Node.js 搭 建 Web Server 


Nodejs 在 其 官网 首页 就 已 经 说 明 其 目的 是 构建 快速 、 可 伸缩 的 网 络 应 用 程序 。 下 面 就 从 
最 经 典 的 Hello World 示 例 程序 开始 ， 创 建 一 个 简单 的 Web 服 务 器 ， 示 例 代 码 如 下 : 


01 var http = require('http'); // 引入 http 模 块 
02 http.createServer (function (req, res) { 
03 res.writeHead(200, {'Content-Type': 'text/plain'}); 
// 写 入 http 状 态 和 类 型 信息 
04 res.end('Hello World\n'); // 输出 内 容 
05 1}).listen(1337, '127.0.0.1'); // 创建 服务 ， 监 听 本 地 1337 端 口 
06 console.log('Server running at http://127.0.0.1:1337/'); 


将 Hello World 代 码 放 入 新 建 的 脚本 文件 example.js 中 ， 并 执行 命令 如 下 : 


node example.js 
服务 启动 成 功 ，Windows 命 令 控 制 台 提示 如 下 : 
Server running at http://127.0.0.1:1337/ 


打开 浏览 器 ， 在 地 址 栏 输入 地 址 http:/127.0.0.1:1337/， 按 Enter 键 执行 打开 页 面 ， 效 果 如 
图 4.28 所 示 。 
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127.0.0.1:1337 x 


€ © | B 127.0.0.1:1337 


Hello World 


图 4.28 Hello World 页 面 


Hello World 完 成 的 工作 虽然 简单 ， 但 是 Nodejs 赁 借 简单 的 几 行 代码 完成 一 个 服务 器 ， 足 
以 看 到 Nodejs 作 者 在 HTTP 方 面 下 的 苦 工 。 
下 面 继续 给 读者 演示 名 为 Express 的 基于 Nodejs 的 Web 应 用 框架 。 先 前 的 小 节 已 经 做 过 简 
单 的 介绍 ，Express 提 供 一 系列 强大 特性 帮助 创建 各 种 Web 应 用 ， 丰 富 的 HTTP 工 具 以 及 来 自 
Connect 框 架 的 中 间 件 随 取 随 用 ， 创 建 强健 、 友 好 的 API 变 得 快速 又 简单 。 

接着 ， 通 过 一 个 示例 向 读者 演示 Express 的 使 用 ， 读 者 可 以 按照 下 列 步骤 进行 操作 ， 以 
Windows 系 统 为 例 。 


(1) 在 计算 机 上 此 处 为 D 盘 上 新 建文 件 夹 ， 命 名 为 express， 用 于 存储 模块 和 代码 。 
(2) 打开 Windows 命 令 行 工具 ， 进 入 刚刚 新 建 的 express 文 件 夹 ， 执 行 命令 如 下 ; 
// 转换 路 径 


// 进入 express 文 件 来 
// 安装 express 程 序 包 


cd d:express 
di: 
node install express 


等 待 express 程 序 包 下 载 完毕 以 后 ，express 文 件 夹 内 多 出 一 个 新 的 名 为 “node_modules” 
的 文件 夹 。 

(3) 进入 “node_modules” 文 件 夹 内 的 “.bin” 文 件 夹 ， 里 面包 含 两 个 文件 ， 如 图 4.29 
所 示 。 


组 织 ” 也 到 所 中 共享 ” 计 新 XH 夫 。 汪 ”站 和 


用 下 

re 国 weress ed。 Tiniows 命 人 本 本 

骂 下 载 

忆 最近 访 6 们 置 。 zj 刘 J Fr 
上 个 | 到 


图 4.29 “.bin” 文 件 夹 内 容 


(4) 双击 执行 express.cmd 命 令 脚本 文件 ， 出 现 Windows 命 令 提示 窗口 ， 如 图 4.30 所 示 。 


TC: \Tindors\systen32Ncad ee 


图 4.30 双击 执行 express.cmd 命 令 脚 本 文件 


176 


oe 第 4 章 “环境 搭建 


(5) 输入 命令 yes， 按 Enter 键 执行 ， 执 行 完毕 后 ， 会 在 “.bin” 文件 内 生成 Express 的 演 
示 代码 文件 ， 如 图 4.31 所 示 。 


| 文件 中 妨 甸 0) 二 看 外 工具 中 才 贡 9 


EE -| 
fs pic 文件 实 
ge 去 这 三 总 omtes 
[1 - ope 
局 下载 ia 文件 到 
i 国 ww> Jsaipt saipt 文件 
ER 和 
司 刁 国 core= mi inavs 全 人 机 本 
en pdksee js sm 文件 
要 W8 | 划 
用 了 十 对 铺 
bi] [ I 加 


图 4.31 演示 代码 文件 生成 完毕 
生成 示例 文件 说 明 如 下 。 


。 public: 用 于 存放 静态 资源 ， 如 图 片 、 样 式 表 、 脚 本 等 。 
。 routes: 存放 对 应 路 由 规则 的 数据 内 容 。 

。 views: 存放 页 面 模 板 。 

。 appjs: 程序 主 执行 文件 。 

。 package.json: 程序 相关 说 明和 依赖 配置 信息 。 


(6) 打开 Windows 命 令 行 工具 ， 进 入 “.bin” 文 件 夹 ， 执 行 如 下 命令 下 载 依赖 程序 包 : 
node install 


等 待 下 载 依赖 程序 包 Express 和 jade， 还 有 对 应 的 诸多 依赖 结束 后 ， 前 期 的 准备 工作 完 
， 接 下 来 正式 运行 脚本 启动 基于 Express 框 架 的 Web 服 务 器 。 


(7) 打开 Windows 命 令 行 工 具 ， 进 入 .bin 文 件 夹 ， 执 行 如 下 命令 启动 服务 : 


二 


node app.js 
启动 成 功 ， 命 令 行 提示 信息 如 下 : 
Express server listening on port 3000 


(8) 打开 浏览 器 ， 在 地 址 栏 输入 地 址 http://localhost:3000/， 按 Enter 键 执行 打开 页 面 ， 效 
果 如 图 4.32 所 示 。 


Express 


‘Welcome to Express 


图 4.32 Express 框 架 示 例 页 面 
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担 。。 Express 是 一 个 非常 强大 的 MVC 框 架 ， 结 合 模板 引擎 jade 在 Web 开 发 中 游 驴 有余， 读者 想 了 解 
区 更 该 框架 的 使 用 ， 可 以 参考 网 站 http://expressijs.com/ 内 容 。 


4.3 jQuery 框架 


jQuery 作为 目前 世界 上 最 流行 的 JavaScript 框 架 ， 也 是 本 书 示例 的 御用 第 三 方 框架 ， 相 
信 很 多 初次 接触 前 端的 读者 对 jQuery 情 有 独 钟 。 对 于 目前 还 不 了 解 或 者 没有 使 用 jQuery 的 读 
者 ， 那 么 ， 请 结束 这 种 状态 ， 迅 速 将 jQuery 掌握 起 来 。 


4.3.1 jQuery 框架 简介 


jQuery 由 美国 人 John Resig 于 2006 年 1 月 14 号 在 BarCamp NYC (http:/Wbarcamp.org) 发布 第 
一 个 版 本 ， 截 止 目 前 ， 全 球 最 流行 的 网 站 中 有 超过 59% 的 在 使 用 该 类 库 ， 在 国内 这 一 比例 还 
更 加 惊人 。jQuery 优 秀 的 应 用 程序 接口 设计 使 得 操作 非常 容易 。 

jQuery 有 以 下 特色 : 
。 体积 轻 。 
。 链 式 语法 。 
。 插件 扩展 。 


CSS 选 择 器 ， 支 持 从 1-3。 
文档 丰富 、 易 上 手 。 


所 以 ， 不 论 使 用 的 人 是 初学 者 还 是 资深 专家 ，jQuery 都 将 是 首选 。 


4.3.2 jQuery 常用 API 


API 全 称 Application Programming Interface， 中 文 意思 为 应 用 程序 编程 接口 ，API 是 对 所 
需 知识 的 抽象 ， 将 系统 的 复杂 性 隐藏 起 来 ， 并 向 外 部 提供 易 理 解 、 一 致 、 可 预见 、 简 洁 的 调 
方式 。jQuery 在 API 的 设计 上 是 相当 出 色 的 ， 按 照 最 新 的 官网 提供 的 1.9 版 本 API 文 档 ， 可 将 
jQuery 提供 的 API 分 为 Ajax、 属 性 、 回 调 对 象 、 核 心 、DOM 操 作 、CSS、 数 据 、 延 迟 对 象 、 尺 
寸 、 效 果 、 事 件 、 表 单 、 内 部 构建 、 操 作 、 位 置 、 选 择 器 、 遍 历 ， 不 过 在 日 常 的 开发 中 ， 并 
非 所 有 分 类 都 会 使 用 到 。 下 面 讲解 部 分 被 频繁 使 用 的 API。 
1. 选择 器 


jQuery 选择 器 提供 了 快速 定位 元 素 的 方法 ， 其 继承 了 CSS 和 了 Path 语言 的 部 分 语法 ， 人 允许 通 
过 标签 名 、 属 性 名 称 、 内 容 对 元 素 进行 精准 的 选择 ， 用 户 在 使 用 时 可 以 完全 不 用 考虑 浏览 器 
的 兼容 问题 。 学 习 使 用 选择 器 是 学 习 jQuery 的 第 一 步 ， 表 4.2 整 理 了 最 常用 的 选择 器 API。 
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表 4.2 选择 器 常用 API 


S$(#id') 选取 一 个 页 面 元 票 人 D 
S$('.class') 选取 所 有 样式 类 包含 class 的 元 系 
S$(‘tagname') 选取 所 有 标签 名 为 tfagname 的 元 票 


$("[attribute|='value']") 


attribute 表 示 一 个 属性 名 ，value 表 示 属 性 值 


S$(":checked") 


表示 选 框 被 选中 ， 适 用 于 复 选 框 和 单 选项 


S$(selector).find(selector) 


获取 元 系 下 的 所 有 利 选 元 系 


S$(selector).closest(selector) 
2. 事件 
浏览 器 事件 指 的 是 用 户 打 开 页 面 到 关闭 页 面 期 间 浏览 器 的 动作 和 对 用 户 操作 的 响应 。 丸 
单 击 页 面 上 的 按钮 、 鼠 标的 移动 、 浏 览 器 大 小 的 调整 等 。jQuery 文 档 在 事件 区 域 有 7 大 块 : 济 
览 器 事件 、 文 档 加载 、 事 件 绑 定 、 事 件 对 象 、 表 单 事 件 、 键 盘 事件 、 鼠 标 事 件 。 表 4.3 整 理 了 
jQuery 事件 中 最 常用 的 部 分 。 


从 当前 元 系 开 始 向 上 遍历 ， 直 到 找到 选择 器 的 一 个 匹配 为 止 


表 4.3 事件 常用 API 
使 用 说 明 


3. 属性 


属性 分 为 两 类 : 元 素 属性 和 对 象 属性 。 所 谓 的 元 素 属性 指 的 就 是 附加 在 元 素 上 的 信息 ， 
英文 称 为 attribute， 代 码 如 下 所 示 : 


<div class="header" style="color:red" data-content="xxx"></div> 


揭 _ 
I 外 下 其 中 的 class、style、data-content 即 元 素 属性 。 


另外 一 种 是 对 象 属性 ， 英 文 称 为 property， 指 的 是 对 象 本 身 具 有 的 特性 。 世 间 的 万 物 都 可 
以 看 作 是 一 个 对 象 ， 如 果 将 一 本 书 看 作为 一 个 对 象 ， 那 么 书本 的 颜色 、 大 小 、 页 数 、 名 称 、 
作者 、 形 状 就 是 书 这 个 对 象 的 属性 ， 代 码 如 下 所 示 : 


var book = { // 书 对 象 
color : 'blue', // 蓝 颜色 
size : '900*600°', // 900X600 大 小 
page : 500, // 500 页 
name : 'html5°', // 书 名 为 htm15 
author : 'yao.zhou', // 作者 yao.zhou 
shape : ''rectangle' // 书 的 形状 为 矩形 


} 


属性 的 设置 是 JavaScript 开 发 中 最 频繁 的 操作 ， 表 4.4 整 理 了 jQuery 属性 操作 中 最 常用 的 
部 分 。 
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表 4.4 属性 操作 常用 API 


S$(selector).addClass(class) 元 票 添 加 样式 类 
S$(selector).removeClass(class) 移 除 元 系 样 式 类 
S$(selector).attr(attribute) 获取 元 标的 属性 值 
S$(selector).attr(attribute,.value) 设置 元 丢 的 属性 值 
S$(selector).val() 获取 元 系 value 属性 的 值 
S$(selector).val(value) 设置 元 又 value 属性 的 值 
S$(selector).html() 获取 元 系 的 内 容 (innerHTML) 
S$(selector).html(content) 设置 元 条 的 内 容 


4. DOM 操 作 

DOM 是 Document Object Model 的 简写 ， 既 文档 对 象 模型 ， 由 一 系列 对 象 组 成 ， 是 访问 、 
检索 、 修 改 HTML 文 档 内 容 与 结构 的 标准 方法 ， 可 以 将 其 理解 为 以 面向 对 象 方式 描述 的 文档 
模型 ， 使 用 者 可 以 添加 、 移 除 、 改 变 、 排 列 页 面 的 结构 ， 表 4.5 整 理 了 jQuery 中 DOM 操 作 最 常 
用 的 部 分 。 


表 4.5 DOM 操 作 常 用 API 


使 用 说 明 
S$(selector).append(content) 将 元 村 或 者 html 字 符 串 插入 获取 元 系 内 部 的 尾部 
S$(selector).prepend(content) 将 内 容 插 入 获取 元 系 同 级 的 后 面 


S$(selector).after(content) 将 元 系 或 者 html 字 符 串 插入 获取 元 系 内 部 的 项 部 
S$(selector).before(content) 将 内 容 插 入 获取 元 系 同 级 的 前 面 
从 DOM 中 去 掉 所 有 匹配 的 元 系 


5. CSS 
CSS 全 称 为 Cascading Style Sheet， 即 级 联 样式 表 ， 通 过 设置 样式 表 ， 可 以 控制 HTML 中 


各 元 素 的 显示 属性 ， 如 字体 颜色 、 大 小 、 背 景 、 粗 细 、 显 示 方 式 等 ， 表 4.6 整 理 了 jQuery 中 
CSS 操 作 最 常用 的 部 分 。 


表 4.6 CSS 操 作 常用 API 


使 用 说 明 
S$(selector).position() 获取 元 系 相 对 于 父 元 系 的 位 置 
6. Ajax 


全 称 Asynchronous JavaScript and XML， 是 一 种 网 页 开发 技术 ， 核 心 是 JavaScript 对 象 
XmlHttpRequest，XmlHttpRequest 人 允许 用 户 向 服务 器 提交 请 求 并 获取 信息 ， 而 不 用 重新 刷新 
页 面 。jQuery 封 装 了 Ajax 并 提供 了 一 堆 非 常 友 善 的 API， 表 4.7 整 理 了 jQuery 中 Ajax 操作 最 常用 
的 部 分 。 
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表 4.7 Ajax 操作 常用 API 


jQuery.get0 使 用 一 个 HTTP GET 请 求 从 服务 器 加 载 数据 
jQuery.post() 通过 服务 器 HTTP POST 请 求 加 载 数据 
jQuery.getJSONO 使 用 一 个 HTTP GET 请 求 从 服务 器 加 载 JSON 编 码 数据 
jQuery.ajax0) 执行 一 个 异步 的 HTTP 〈Ajax) 的 请 求 


通 上 以 上 的 API 基 本 能 完成 一 般 网 站 的 前 端 开发 工作 ， 读 者 也 可 以 前 往 jQuery 的 官方 文档 
http://api.jQuery.com/ 学 习 更 多 相关 知识 。 


4.4 ”其 他 实战 开发 技巧 


一 谈 到 前 端的 实战 ， 读 者 可 能 首先 会 想到 兼容 各 种 浏览 器 的 奇异 技巧 ， 想 到 为 了 测试 前 
端 兼容 问题 ， 需 要 在 电脑 上 安装 IE、Chrome、Firefox、Opera， 甚 至 为 了 测试 纯正 的 IE 6 还 
需要 安装 一 台 虚 拟 机 。 是 的 ， 没 有 错 ， 如 果 励 志 要 做 一 位 合格 的 前 端 工程 师 ， 那 么 这 些 一 个 
都 不 能 少 。 本 节 介绍 的 开发 技巧 不 会 过 多 的 纠缠 在 兼容 性 上 ， 更 多 的 是 如 何 提高 前 端 调试 效 
率 ， 学 习 下 面 的 技巧 并 融会 贯通 ， 可 以 帮助 开发 者 更 快 地 定位 线 上 问题 ， 迅 速 地 判断 并 做 出 
修复 。 


4.4.1 如 何在 Chrome 浏 览 器 调试 脚本 


每 种 浏览 器 都 有 自己 的 调试 工具 ， 如 下 的 开发 人 员工 具 、Firefox 的 Firebug， 各 种 主流 的 
浏览 器 调试 工具 都 是 大 同 小 异 ， 这 里 将 要 介绍 的 是 Chrome 浏 览 器 的 开发 者 工具 ， 可 以 通过 使 
快捷 键 F12 调 出 工具 界面 ， 如 图 4.33 所 示 。 


[CE 


© Bhttps://mm. google.comintl/zh-CNVchrome/hrowser 


@ chrome 


并 


获取 快速 、 免 费 的 网 络 浏览 器 


一 款 适 用 于 计算 机、 手 机 和 平板 电脑 的 浏览 器 


图 4.33 Chrome 浏 览 器 开发 者 工具 


JIHTML 5amrazmrr >—、.、., 


工具 条 上 面 提 供 了 6 大 默认 功能 Elements、Resources、Network、Sources、Timeline、 
Console。 


(1) 元 素面 板 (Elements) ， 如 图 4.33 所 示 。 右 侧面 板 分 别 是 Computed Style (计算 所 
得 样式 ) 、Styles (页 面 样式 ) 、Metrics (页 面 测 距 ) 、Properties (HTML 属 性 ) 、DOM 
Breakpoints (DOM 断 点 ) 、Event Listeners 〈 事 件 监听 器 ) 。 


在 元 素面 板 左 侧 HTML 结 构 展示 区 ， 单 击 鼠 标 右键 选中 一 个 元 素 ， 出 现 元 素 修改 菜单 ， 
如 图 4.34 所 示 。 


ER 


0 ”0 E 


Mdd attribute 
Force lenent state 上 


dit as WNL 
Copy ss INL 
Copy XPath 
Delete node 
TInspect DO properties 
Subtree nodifications 


Mtributes nodifications 
Node removal 


nd 
cscript src= 
<script 5 - 
<script>w</script> 
P <iframe src="//fls.dovbleclick. net/activityissrc=2542116;. 
<script>c/script> 


口 , 冯 A htmkwinjsconsumerchrome 
图 4.34 单 击 鼠 标 右键 选中 一 个 元 素 


由 上 到 下 依次 是 : Add attribute (在 元 素 上 添加 一 个 属性 ) 、Force element state 〈 强 
行 设置 元 素 状态 ) 、Edit as HTML 〈 以 HTML 方 式 编辑 元 素 ) 、Copy as HTML (复制 元 素 
HTML 结 构 内 容 ) 、Copy XPath (获取 元 素 XPath) 、Delete node (删除 元 素 ) 、Inspect DOM 
properties (检查 元 素 属性 ) 、Break on( 断 点 ) 、Scroll into view〈 视 窗 滚动 到 元 素 视线 
区 ) 、Word wrap〔 自 动 换行 )。 

其 中 Force element state 选 项 还 有 4 种 状态 active (被 按 下 时 ) 、hover (悬浮 时 ) 、focus 
(焦点 时 ) 、visited (访问 后 ) 。Break on 选项 有 三 种 状态 Subtree modifications 〈( 子 树 发 生 
修改 时 暂停 进入 断 点 ) 、Attributes modifications (元 素 属 性 发 生 修改 时 进入 断 点 ) 、Node 
Temoval (元素 被 删除 时 进入 断 点 ) 。 


(2) 资源 面板 〈(Resources) ， 如 图 4.35 所 示 。 
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国 ements [Resourees| @ Neewort OB sourees (Timeine [conioe ~ * 


Tp 


» dindexedDB 

» 装 Local songe 

* 国 Session Storsge Frames 
* 司 cookies 

上 * 园 Applicxtion Cache 


OO. a As 交 
图 4.35 资源 面板 


在 资源 面板 的 左 侧 可 以 依次 看 到 Frames、Web SQL、IndexedDB、Local Storage、Session 
Storage、Cookies、Application Cache。Frames 栏 列 出 了 页 面 上 引入 的 所 有 窗口 框架 和 其 对 应 
的 资源 ， 其 余 栏 除了 Cookies 外 都 是 HTML 5 新 增 的 功能 ， 用 户 可 以 单 击 打开 每 项 内 容 进 行 查 
看 和 管理 ， 这 里 拿 Local Storage 举 个 例子 ， 查 看 资源 面板 右 侧 的 数据 栏 ， 在 数据 行 上 单 击 无 
鼠标 右键 ， 出 现 带 有 Edit 和 Delete 功 能 的 菜单 栏 ， 用 户 可 以 通过 该 菜单 栏 进行 即时 的 数据 编 
辑 ， 如 图 4.36 所 示 。 


国 ements | OResourees| @ Network OB Sources CMTimeine [gconso ~ * 
* OO Fames Key Value 

> Fweb sQL 

YE lindexedDB 
国 Local songe 


读 htpy/2542116.9s.doub.. 
国 https//3pis,google.com 
* 国 Session sorage 

+ 后 cookies 

Y 国 Application Cache 


QQ ex ol08 净 
图 4.36 Local Storage 


(3) 网 络 面板 (Network) ， 如 图 4.37 所 示 为 网 址 http://www.google.cn/intl/zh-CN/ 
chrome/ 对 应 的 网 络 瀑布 图 。 


力 ements BResourees | 人 Nak| D8 Sources (RTimetine [7 console 加 


Name Er EE Se Time 
Pt Me Po Domain Type Dnitietot “| 2 lm Cee | 
| chrome/ 304 了 2208 205… EE 
ES /nusn-cn GET NotModifed wwgoogkecn totihtml Other 240kB 205ms pub 
chrome,min,ess 304 amwgoo，。 08 169.. > 
intl/zh-CN/chrome/3ssets/common/ess SET Not Modified | ew.9o0gleen es Parser 107KB 169ms PY 
ceayfamiy=Open*Sanz300400.600700&-。 GET 200 ee 三 esaoo-。 6558 23 pv 
fonts.googleapii.com ok Parser 11KB 233ms 
chrome_logo_zxpng 304 wuwigo0.. 0B 217… 
Jintlfzh- CN/chrome/assets/common/imag ETO Nt Nerd nen nagejpng [pyar 38KB 216ms Pv 
304 waigo0.. 220B 228.. 
om/js/gweb/analytics ET | Nee Mouiied | wooga com ao | parser 49KB |229 ms publ- 国 
[a | Documents Stylesheets lImages Scripts XHR Fonts WebSockets Other 3 
图 4.37 网 络 瀑布 题 
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通过 瀑布 图 可 以 查看 网 络 请 求 的 具体 细节 ， 还 可 以 通过 面板 底部 的 请 求 类 型 进行 分 类 查 
看 ， 如 Documents、Stylesheets、Images、Scripts、XHR、Fonts、WebSockets、Other。 请 求 的 
明细 信息 除了 默认 的 一 此 外， 还 可 以 添加 额外 的 信息 ， 在 面板 请 求 标题 处 单 击 鼠 标 右键 ， 出 
现 菜单 如 图 4.38 所 示 。 


© [DD wm. go0gle. cn 


@ chrome 


下 载 功能 


国 semens 回 resouees | 全 Ra BB souces 区 mn EB consare 


ET 


Connection 
Centent-Eneoding 
Cntent-Leneth jial 
Case ”Script 436 6600 mn 
Dasin 
Ha 
ritiater 
让 Keep-Mive 
cb=gapiloaded_0 pp 
5googh Nethod 
Server 
Set-Cookies 
Size 
Status 


Tine 
Te Pogle.., applia ee 2 
Yay Stylesheets Images Scripts XHIB3 01 阁 


图 4.38 在 面板 请 求 标题 处 单 击 鼠标 右键 


菜单 选项 的 名 称 对 应 的 说 明 如 表 4.8 所 示 。 
表 4.8 菜单 选项 寿命 
功能 名 说 明 
入 提交 的 加 在 常见 的 值 有 private、no-cache、max-age、must-revalidate 
请 求 连接 方式 ， 如 Keep-Alive、close 等 
采用 的 编码 方式 ， 如 gzip 
Content-Length 消息 内 容 长 度 
Cookies Cookie 信 息 
珊 名 信息 
ETag 被 请 求 变 量 的 实体 值 
Initiator 请 求 发 起 者 
Keep-Alive 保持 连接 特性 
Last-Modified 最 后 资源 修改 时 间 
Method 请 求 类 型 ， 如 GET、POST 
服务 器 类 型 
响应 添加 的 cookie 信 息 
请 求 大 小 
返回 的 HTTP 状 态 码 ， 如 200、304 等 
请 求 耗 时 
请 求 类 型 ， 如 image/gif、application/x-JavaScript 等 
中 间 缓 存 服务 器 的 缓存 依据 
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LE 击 网 络 面板 列表 中 的 单条 请 求 ， 面 板 右 侧 出 现 该 条 请 求 的 详细 信息 ， 有 Headers、 


Preview、Response、Cookies、Timing， 如 图 4.39 所 示 。 


€ DC Dwm.google. cn/intl/zh-CN/chrome/ 


@ chrome 


下 载 功能 移动 版 信息 库 


区 Bemeoe 国 Resourees | 全 Na D8 sources (WM Timetine [1 consore 


Headers | Preview Response Cookies Timing 


FE 
2542116.f15.d 

司 | js 
www gog 

utm.gffo lww=5.4.38utms=38utmn=5... 

www.google-analytics,.com 

|] conversionjs 

上 www,googleadservices,.com/pagesd 

国 andom=1375192849380&cv=Tafst=1375.… 
www.googleadservices,com/pagead/convers 

[7] oe?obellD=102311oartneflD=216&clie,. 到 

DJ 辣 | | 号 © 加 | Document 


Request URL: http://wuw. google, com/js/gweb/a 
nalytics /autotrack.js 
Request Method: GET 
Status Code: @ 304 Not 
Hodified 

v Request Headers 
Accept: */* 
Accept-Encoding: grip, deflate,sdc 
nh 


View source 


Accept-Language: zh- 
CN, zh;q=8.8 


Cookie: HSID=AOHmGpMegazX5YzQ7; APISID=mFM 
5x4EY2er]VBSH/A9fmbOUCNCf45 RE 局 
Sb15ad2bal37c3d9:U=a0a86999F59c4ac6:FF=0: | 


Stylesheets lmages Script XHR Font Whl 疾 


图 4.39 请 求 详细 信息 
(4) 源码 面板 《Sources) ， 该 区 域 功 能 主要 用 户 查看 和 代码 调试 ， 如 图 4.40 所 示 。 


€ 3 CC 口 wmw.google. cn/intl/zh-CN/chrome/ 


@ chrome 


下 载 


Sources | Content.。 Snippets[[] I 


* © www.google.cn 
» © (no domain) 


» © apis.google.com 

» © fonts,googleapis.com 

> © ;segment- itemedia.co! 
* © www.google-analytics.com 
> © www.google.com 

> © www.googleadservices.com 


Da go 


» Watch Expressions 

» Call Stack 

» Scope Variables 

» Breakpoints 

» DOM Breakpoints 

» XHR Breakpoints 

» Event Listener Breakpoints | 
» Workers 


图 4.40 源码 面板 
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对 于 长 期 从 事 JavaScript 的 开发 人 员 来 说 ， 使 用 最 多 的 应 该 就 是 源码 面板 。 面 板 的 左 侧 是 页 
面 引用 文件 的 完整 列表 ， 当 页 面 引用 的 脚本 文件 非常 多 时 ， 使 用 文件 列表 并 不 能 很 快 的 帮忙 定 
位 代码 文件 ， 这 时 候 可 以 使 用 组 合 键 CaltkO， 出 现 如 图 4.41 所 示 的 文件 查询 面板 。 


辆 temee 加 Resourees @ Network | Sourees| Timeline [consoe … > 


四 5 


DXQgO 2 称 
图 4.41 文件 查询 面板 
另外 ， 如 果 想 查询 文件 中 的 代码 关键 字 ， 可 以 使 用 组 合 键 Ctrl+ShifttF， 在 页 面 引 用 的 


脚本 代码 中 查询 带 有 google 关 键 字 的 信息 ， 如 图 4.42 已 经 通过 箭头 标 出 查找 后 的 高 亮 关 键 字 
信息 。 


国 ements BD Resourees 图 Newor | sourees| CR Timeline [I consote x 


| Sources Content.，Snippets 加 | 四川 AAA + + 办 
| » Watch Expressions +e 
open a file | Call Stack 


上 O www.google.cn 
* O (no domain) 


» © 2542116.fs.doubleclick.net Scope Variables 
* © apis.google.com Breakpoints 
» © fonts.googleapis.com » DOM Breakpoints 
> © ;segment-pivelinvitemedia,e | XHR Breakpoints + 
上 加 www,google-analytics.com 区 Event Listener Breakpoints 
上 加 wwwgooglecom a | Workers 
A pes 
1 » 
四 {} Searchsources[Q googke x [lgnorecase 厂 Regularexpression x 
whttp://2542116.1 =2542116;type=clien612;cat=chrom0;ord=55906688794.49 委 
1 | <!DOCTYPE htnl Pd VW3C//DTD HTML 4.@1 Transitional//EN" “http://wuw. Ww3.orl 


3 var co 
5 var ci 
6 var converhsion_format = "3 
7 war conversion_color = 1 
var conversion_1abel 
日 var Conversion_v: 
12 <script type="text/jav. src="https://wuw, services. com/pagead/conv 
16 <img height="1" width=' yle="border -style:n' src="https: //wuw. 
19 </noscript><!-- Code for PXL - Chrome - Homepage - Visit pldt --> 

1 » 


OD, A searchfinished. Found257 matchesin 10files， 人 A8 阁 


图 4.42 使 用 代码 查询 面板 查找 代码 中 带 有 google 关 键 字 信息 


(5) 时 间 线 面板 〈Timeline) ， 可 以 检测 Events (事件 ) 、Frames (框架 ) 、Memory 
(内 存 ) 三 种 类 型 ， 如 图 4.43 所 示 。 
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一 Resources © Network DB sources [CM Timetine| corso 六 wa 


Wal Frames 
[Memory 


RECORDS 


[= 让 [二 诈 v loading WScripting Rendering 一 painting 0of0recordsjl 


图 4.43 时 间 线 面板 


如 果 使 用 者 要 进行 记录 ， 需 要 单 击 如 图 4.43 箭 头 所 示 的 圆 点 按钮 ， 单 击 按钮 变 红 后 ， 殖 


习 


how Al 奖 


板 就 会 显示 每 次 执行 操作 的 变化 情况 。 该 面板 主要 用 于 浏览 器 性 能 方面 的 调试 ， 由 于 传统 的 


网 站 正在 向 应 用 方向 转型 ， 页 面 功能 日 趋 复杂 ， 所 以 对 于 传统 的 网 络 优化 是 无 法 满足 日 益 变 
化 的 复杂 需求 的 ， 浏 览 器 性 能 优化 将 是 未 来 前 端 优化 课题 中 不 可 或 缺 的 一 个 重要 部 分 。 


(6) 控制 全 (Console》， 这 块 也 是 日 常 前 端 经 常 使 用 的 部 分 ， 用 户 可 以 在 上 面 直接 书 


写 脚本 代码 ， 同 时 Chrome 浏 览 器 还 非常 友善 地 进行 代码 提示 。 


4.4.2 如 何 通过 Fiddler 加 速 开 发 


Fiddler 是 Windows 底 下 最 强大 的 请 求 代理 调试 工具 ， 监 控 任 何 浏览 器 的 HTTP/HTTPS 流 


量 ， 自 改 客户 端 请 求 和 服务 器 响应 ， 解 密 HTTPS Web 会 话 ， 图 4.44 为 Fiddler 原 理 示意 图 。 


图 4.44 Fiddler 原 理 示 意 题 


Fiddler 安 装 的 系统 要 求 为 Windows XP 或 Windows 8 中 的 版 本 ， 其 中 Fiddler 2 依赖 于 


Microsoft.NET Framework 2.0， 最 新 的 Fiddler 4 依赖 于 Microsoft.NET Framework 4.0。 


Fiddler 功 能 很 多 ， 在 这 里 介绍 一 项 最 常用 的 代理 功能 。 假 使 在 维护 的 
出 现 脚本 问题 ， 这 时 候 采 用 传统 的 方法 ， 将 网 页 内 容 完 整 的 保存 到 本 地 ， 
码 ， 很 显然 这 种 方法 显得 有 点 笨重 ，Fiddler 解 决 这 个 问题 显得 游 妨 有 剑 ， 


网 站 线 上 有 个 功能 
然后 调试 对 应 的 代 
其 要 做 的 是 ， 将 对 


应 问题 脚本 保存 到 机 器 本 地 ， 修 改 脚本 并 通过 Fiddler 代 理 ， 下 面 通过 一 
例 演示 该 过 程 。 


(1) 开启 Fiddler， 选 中 其 右 侧 AutoResponder 标 签 页 ， 选 中 Enable automatic responses 和 


个 百度 首页 的 操作 示 
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Unmatched requests passthrough 复 选 框 ， 如 图 4.45 所 示 。 


Pidaler Yeb Debugcer 
File Edit Rules Tools View Help GET /book 


图 4.45 开启 Fiddler 


(2) 打开 Chrome 浏 览 器 ， 在 地 址 栏 内 输入 http://www.baidu.com 并 按 Enter 键 进入 ， 此 时 
百度 首页 的 请 求 会 被 完整 的 显示 在 Fiddler 左 侧 的 列表 中 ， 如 图 4.46 所 示 。 


suggestion.baidu.,, jsu?wd=8cb=window,bdsug.sugPreRequest8cid=1433 2 
passport,baldu,com jpa5sAplgjuni_iogn_wrapper ,js?cdnverslon=137537199， 
» 


ES SeesesE 


图 4.46 百度 首页 请 求 列表 


(3) 选中 列表 中 的 第 五 条 请 求 〈 该 请 求 为 JavaScript 脚 本 ) ， 在 该 请 求 上 方 单 击 并 拖 动 
至 右 侧 的 AutoResponder 标 签 页 下 方 空白 的 列表 中 ， 如 图 4.47 所 示 。 


ier Yeob Dee 
File Edit Rules Tools yier Help GET /book 
局 fpley X Bosme 事 Strem 潍 Deeode Kasp; Ll sessions ， 图 hay Process 的 Find 网 se 凯 局 hrorse - 仿 DLewr Cache 下 Textfizard | 


| 划 


Rule Edor 
[Eachtp:lls1 bastate.comr /w/cache/staticI glo 3] Test, oSave 
Por session.s | Makch only once 


更 4 


服 captrne [= Alprocesses | | 119 htp:fst 


图 4.47 代理 一 条 脚本 请 求 


(4) 复制 第 五 条 请 求 的 URL 地 址 ， 使 用 浏览 器 打开 并 将 脚本 内 容 保存 到 机 器 本 地 文件 夹 
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(5) 在 刚才 保存 的 脚本 未 尾 添加 一 行 代码 : 
document .body.style.backgroundColor="'black" // 修改 页 面 背景 色 为 黑色 


(6) 修改 Fiddler 右 侧 AutoResponder 标 签 页 下 方 列表 的 “then respond width..” 列 ， 将 其 
指向 本 地 保存 的 脚本 代码 地 址 ， 如 图 4.48 所 示 。 


DOD Fers | 日 wo i 三 Tmelne 
© statistes | 现 Inspectors £ AutoResponder 可 Composer 
Hep 

人 Enable automatic responses [7 Unmakched requests passthrough 。 厂 Enable Latency 


AddRule Jmport… Use the + and - keys to reorder rules, 
下 matches， 


回 ExACTihttp:jsl.bdstatic.comjrjiwwwjcach,， D:\home_ef347748,s 


Edkor 
Tihttp:JjsLbdstatic， jstatic/global/js/home ef34774 =| Test,., ~ Save 


了 可 Match only once 


图 4.48 修改 请 求 的 本 地 代理 地 址 


(7) 打开 Chrome 浏 览 器 ， 在 地 址 栏 内 输入 http:/www.baidu.com 并 按 Enter 键 进入 ， 此 时 
百度 首页 变 为 黑色 ，Fiddler 代 理 成 功 。 


示例 中 完成 的 功能 只 是 一 种 简单 的 模拟 ， 读 者 在 实际 开发 中 可 以 通过 Fiddler 代 理 ， 修 改 本 地 脚本 


提 _ 
国 下 
ET™ 的 具体 代码 ， 再 结合 Chrome 浏 览 器 的 调试 功能 ， 解 决 网 站 的 线 上 问题 将 变 得 简单 且 高 效 。 


4.5 本章 小 结 


本 章 介绍 了 本 书 示例 运行 所 需要 的 软件 环境 ， 包 含 编辑 器 、Node.js、jQuery， 同 时 还 介 
绍 了 如 何 用 Chrome 浏 览 器 进行 开发 测试 ， 使 用 Fiddler 进 行 请 求 代理 ， 提 升 软件 开发 效率 。 
学 习 Node.js 有 助 于 了 解 JavaScript 在 非 浏览 器 环境 下 的 工作 方式 ， 同 时 还 能 快速 编写 Web 应 
用 服务 ， 全 面 了 解 HTML 5 在 实际 开发 中 的 前 后 端 实现 。jQuery 框 架 是 目前 市 面 上 最 火热 的 
JavaScript 框 架 ， 通 过 该 框架 的 学 习 ， 读 者 可 以 轻松 地 对 浏览 器 DOM 结 构 进行 操作 ， 而 不 用 
考虑 不 同 浏览 器 的 兼容 情况 。 本 章 最 后 的 实战 技巧 ， 有 助 于 读者 提高 实际 前 端 开 发 的 工作 效 
率 ， 相 信 读 者 在 学 习 完 本 章 之 后 ， 通 过 反复 地 练习 ， 必 定 能 受益 菲 浅 。 
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单 大 演练 


表单 一 直 以 来 都 是 HTML 中 非常 重要 的 部 分 ， 用 于 采集 和 提 
交 用 户 输入 的 信息 。 在 HTML 5 出 现 之 前 ， 开 发 者 需要 通过 大 量 的 
JavaScript 代 码 进行 表单 的 验证 和 效果 模拟 ， 在 开发 和 维护 上 都 需 
要 耗费 大 量 的 精力 。HTML 5 出 现 之 后 ， 提 供 了 全 新 的 表单 类 型 和 属 
性 ， 甚 至 不 需要 借助 JavaScript 就 能 实现 与 之 相同 的 功能 。 本 章 的 示 
例 从 现实 的 表单 使 用 场景 出 发 ， 让 读者 可 以 充分 了 解 到 如 何 让 表单 元 
素 的 新 类 型 与 新 属性 同 JavaScript 的 完美 结合 ， 同 时 还 能 了 解 如 何 解 
决 低 版 本 浏览 器 的 兼容 方案 。 

本 章 知识 点 : 


。 各 种 新 的 表单 元 素 

。 跨 浏览 器 的 HTML 5 表单 
。 文件 与 图 片上 传 

。 多 文件 上 传 与 异步 上 传 


5.1 示例 1 创建 跨 浏览 器 的 HTML 5 表单 


5.1.1 示例 效果 


本 示例 是 一 个 有 关 用 户 详 细 信息 的 表单 。 用 户 可 以 在 表单 内 填写 姓名 、 年 龄 、 生 日 、 
个 人 状态 、 幸 运 色 、 博 客 、 邮 箱 ， 填 完 上 述 的 信息 后 单 击 “ 提 交 ” 按 钮 进行 保存 。 示 例 中 
运用 多 种 input 的 新 属性 和 类 型 ， 如 新 属性 有 placeholder、required、min、max、step， 新 类 
别 有 number、date、range、color、url、email。 在 不 支持 新 特性 的 浏览 器 上 使 用 jQuery UI、 
ColorPicker、Placeholder 、Web Form 2 第 三 方 组 件 进行 模拟 。 

使 用 支持 HTML 5 表单 新 特性 的 浏览 器 Chrome 打 开 ， 运 行 效 果 如 图 5.1 所 示 。 单 击 “ 生 
” 右 侧 朝 下 方 的 小 三 角 ， 运 行 效 果 如 图 5.2 所 示 。 单 击 “ 幸 运 色 ” 右 侧 颜色 选择 器 ， 运 行 效 
果 如 图 5.3 所 示 。 单 击 “ 提 交 ” 按 钮 ， 表 单 自动 进行 输入 校 验 ， 对 未 满足 输入 要 求 的 进行 错误 
提示 ， 运 行 效果 如 图 5.4 所 示 。 
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姓名 Eee 姓名 车 
| | 2 
生日 Favaa 要” 生日 pp/ 到 vw 
个 人 状况 下 入 4 | 到 加 ”5 图 项] 
2 ee 幸运 色 周三 周 四 局 五 周 六 
幸运 色 国有 = 30 3 2 3 4 5 
3 mm| | 9 ED 1 12 
| 博客 | 4 15 1 17 18 19 
20 21 22 23 24 2 26 
邮箱 Fe 邮箱 |27 28 2 30 3 1 2 
二 | , 
图 5.1 创建 跨 浏 览 器 的 HTML 5 表单 效果 | 图 5.2 单 击 “ 生 日 ” 右 侧 朝 下 方 的 小 三 角 效 果 
姓名 
LN 
[| 
国画 
个 mm 
Lm 
色调 EE): B” 红 0): 231 


饱和 度 G): [E30 绿 G): 2 
磊 色 | 屿 色 D) 识 度 0): [7 蔓 oD: 后 


添加 到 自 定义 颜色 (A) 


图 5.3 单 击 “ 幸 运 色 ” 右 侧 红 色 颜 色 选择 器 效果 


站 ex |] 

年 龄 《加 请 填写 此 字段 。 

生日 pry/ 可” 
个 人 状 员 有 一 一 一 一 单身 
| 

博客 pw | 

邮箱 Poo@ocom | 

EE 于 | 


图 5.4 单 击 “ 提 交 ” 按 钮 后 效果 


这 里 使 用 不 支持 新 特性 的 浏览 器 下 8 来 打开 网 页 文件 ， 运 行 效果 如 图 5.5 所 示 。 单 击 “ 提 
交 ” 按 钮 ， 运 行 效果 如 图 5.6 所 示 。 


JIHTML 5mmraxmw 0 


MG 二 


年 的 年 维 A value must be supplied or selected 
生日 生日 - A value must be supplied or selected. 
一 一 一 一 
丰 二 色 国有 Ba 国有 
博客 Pupywww orcom 8 
邮箱 [Fa 邮箱 | mustbe supphed or selectodl 
Soppied or salecied 


过 | | 


图 5.5 表单 在 IE 8 下 的 运行 情况 图 5.6 在 IE 8 下 单 击 “ 提 交 ” 按 钮 


5.1.2 代码 设计 
编辑 如 下 代码 ， 并 保存 为 “001. 创 建 跨 浏览 器 的 HTML 5 表单 html” 文 件 ， 代 码 如 下 ; 


01 <! DOCTYPE HTML> 


02 <html> 

03 <head> 

04 <link rel="stylesheet" href="../css/jquery-ui-l.9.2.custom.css"> 

05 <link rel="stylesheet" href="../css/colorpicker.css"> 

06 <link rel="stylesheet" href= /css/webforms2.css"> 

07 <link rel="stylesheet" href= /css/htmlS5forms.layout.css"> 

08 <script src="../js/jquery-1.8.3.js"></script> <!-- 依赖 的 脚本 ---> 

09 <script src="../js/jquery-ui-l1.9.2.custom.js"></script> 

10 <script src="../js/jquery.placeholder.js"></script> 

La <script src="../js/colorpicker.js"></script> 

12 <script src="../js/modernizr.custom.2.6.2.js"></script> 

13 <script src="../js/webforms2_ src.js"></script> 

14 </head> 

15 <body> 

16 <header> 

17 <h2> 创 建 跨 浏 览 器 的 HTML 5 表单 </h2> 

18 </header> 

hb, <form> 

20 <div> 

2 <label for "placeholder"> 姓 名 </label> 

<input id="placeholder" name="placeholder" type="text" 
placeholder=" 请 输入 " required /> 

| </div> 

24 <div> 

25 <label for="spinner"> 年 龄 </label> 

26 <span class="age"> 

2 <input id="spinner" name="spinner" type="number" min="]1" 
max="100" step="1" required /> 

28 </span> 

2 </div> 
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30 
= 
32 


EF 
34 
35 
36 


37 


38 
39 
40 
41 
42 


43 
44 
45 
46 
47 


48 
49 
50 
51 


52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
了 公 
13 
74 


<div> 
<label for="datepicker"> 生 日 </label> 
<input id="datepicker" name="datepicker" type="date" required 
/> 
</div> 
<div> 
<label for="range"> 个 人 状况 </1label> 
<input id="range" name="range" type="range" min="]1" max="5" 


value="1" step="1" /> 
<div id="slider" style="display: none;" class="slider" min="1" 
max="5" Value="1"” step="1"></div> 
<span id="state" class="tip"> 单 身 </span> 
</div> 
<div> 
<label for="colorpicker"> 幸 运 色 </label> 
<input id="colorpicker" name="colorpicker" type="color" 
value="#e71605" /> 
<span id="colorpicker-span"></span> 
</div> 
<div> 
<label for="url"> 博 客 </label> 
<input type="url" id="url" name="url" placeholder="http://www. 
xxx.com" required /> 
</div> 
<div> 
<label for="email"> 邮 箱 </label> 
<input type="email" id="email" name="email" placeholder="xxx@ 
xxx.com" required /> 
</div> 
<button type="submit"> 提 交 </button> 
</form> 
</body> 
<script> 
// 个 人 状况 数据 枚 举 
Var STATE HASH = { 
nn ' 单 身 '， 
'2':!' 热 恋 '， 
' 备 婚 '， 
' 已 婚 '， 
' 保 密 ' 


1; 

if (!Modernizr.inputtypes.number) { // 判 断 input 是 否 为 number 类 型 
$("#spinner") .spinner () 7 

] 

if (!Modernizr.inputtypes -date) { // 判 断 input 是 否 为 aate 类 型 
$("#datepicker") .datepicker (); 

1 

if (!Modernizr.input.placeholder) { // 判 断 input 是 否 为 placeholder 类 型 
$("#placeholder") .addClass ('placeholder') .placeholder () 7 
$("#url") .addClass ('placeholder') .placeholder (); 
$("#email") .addCclass('placeholder') .placeholder (); 
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75 jy 

76 if (!Modernizr.inputtypes.color) { // 判 断 input 是 否 为 color 类 型 
nn $ ("#colorpicker") -hide () 7 // 隐 藏 color 文 本 输入 框 

78 / /初始化 colorPicker 组 件 并 添加 确认 回调 函数 onsubmit 

79 $("#colorpicker-span") .ColorPicker({ 

80 onSubmit: function (hsb, hex, rgb, el) { 

81 $ (el).css('background', '#"' + hex); 

82 } 

83 }) .show(); 

84 }; 

85 if (!Modernizr.inputtypes.range) { / /判断 input 是 否 为 range 类 型 
86 $('#range') .hide(); // 隐 藏 range 文 本 输入 框 

87 $('#slider') .show() .slider({  // 使 用 jQuery UI 初始 化 slider 控 件 
88 min: 1, // 拖 动 最 小 值 

89 可 < 了 5 // 拖 动 最 大 值 

90 step: 1, // 拖 动 间隔 

呈正 change: function (event, ui) { 

92 // 获 取 拖 动 的 值 ， 从 个 人 状况 枚 举 中 获取 对 应 类 型 

93 $("#state") .html (STATE HASH[ui.value]); 

94 » 

95 DD); 

96 } else { 

9 $('#range') .on('change', function () { 

98 // 从 个 人 状况 枚 举 中 获取 对 应 类 型 

99 $("#state") .html (STATE HASH[$ (this) .val()]); 

100 ]) 7 

101 }; 


102 </script> 

103 </html> 

代码 利用 Modernizr 库 判断 浏览 器 是 否 支 持 HTML 5 表单 特性 ， 如 果 支 持 则 采用 默认 的 浏 
览 器 行为 ， 如 果 不 支 持 则 调用 jQuery 插件 模拟 特性 。 


5.1.3 代码 分 析 


代码 第 01 行 声明 了 文档 所 使 用 的 HTML 规 范 ， 读 者 可 以 看 到 HTML 5 对 DOCTYPE 做 了 极 
大 的 简化 ， 体 现 了 化 繁 为 简 的 设计 准则 。 对 比 下 HIML 4 的 DOCTYPE 代 码 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ 

htm14/strict.dtd"> 

示例 中 的 JavaScript 代 码 统一 使 用 Modemizr 来 检测 当前 浏览 器 是 否 支持 文本 框 类 型 ， 利 用 
Modernizr.inputtypes[type] 对 input 类 型 进行 检测 。 

第 58 行 ~ 第 64 行 是 一 个 数据 枚 举 ， 列 出 用 户 状态 的 5 种 类 型 。 接 下 来 的 代码 由 5 个 ii 组 成 ， 
用 来 对 表单 元 素 初 始 化 。 

第 65 行 ~ 第 67 行 用 于 判断 浏览 器 是 否 支持 input 的 number 类 型 ， 如 果 不 支持 则 使 用 jQuery 
UI 的 数字 调节 控件 。 

第 68 行 ~ 第 70 行 用 于 判断 浏览 器 是 否 支 持 input 的 date 类 型 ， 如 果 不 支持 则 使 用 jQuery UI 日 
期 控件 。 
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第 71 行 ~ 第 75 行 用 于 判断 浏览 器 是 否 支持 input 的 placeholder 属 性 ， 如 果 不 支持 则 使 
三 方 jQuery 的 插件 生成 ， 并 给 每 个 元 素 添加 placeholder 样 式 名 (用 于 排 焦点 情况 下 的 字体 变 
灰 ) 。 

第 76 行 ~ 第 84 行 用 于 判断 浏览 器 是 否 支持 mput 的 color 类 型 。 如 果 不 支 持 则 使 用 Stefan Petre 
的 colorpicker 插 件 实现 颜色 选择 器 ， 并 传 入 onSubmit 函 数 用 于 监听 组 件 提交 ， 代 码 如 下 所 示 : 


onSubmit: function (hsb, hex, rgb, el) { 
$(el).css('background', '#"' + hex); 
} 
第 85 行 ~ 第 101 行 用 于 判断 浏览 器 是 否 支持 input 的 range 类 型 。 如 果 不 支持 则 隐藏 自身 元 
素 ， 显 示 相 邻 div 元 素 ， 调 用 slider 插 件 进行 初始 化 ， 传 入 参数 。 如 果 支 持 则 监听 元 素 的 change 
事件 ， 在 用 户 拖 动 滑 块 时 动态 地 改变 个 人 状态 提示 。 


棍 
故去 采用 div 作 为 jQuery UI 的 滑 块 组 件 元 素 ， 是 由 于 插件 不 支持 input 标 签 调用 。 


5.1.4 相关 知识 


1.，<input> 标 签 

input 除 了 上 面 出 现 的 number、date、text、color、range、url、email 这 7 种 类 型 外 ， 还 有 
password、checkbox、file、hidden 等 老 类 型 ， 同 时 新 增 了 time、month、week、datetime 等 新 类 型 。 

2. Web Forms 2.0 


示例 中 引用 了 webforms2_sre.jjs 肢 本， 该 类 库 提供 HTML 5 表单 之 前 的 版 本 “WHATWG 网 
络 表单 2.0” 规 格 的 跨 浏览 器 实现 ， 用 户 使 用 旧 的 浏览 器 访问 使 用 了 新 特性 的 页 面 也 能 享受 
到 相同 的 体验 。 详 见 GitHub 项 目地 址 https://github.com/westonruter/webforms2。 


5.2 示例 2 搞定 低 版 本 浏览 器 的 
兼容 性 问题 


5.2.1 示例 效果 


该 示例 为 读者 展现 了 一 个 典型 的 优雅 降级 场景 。 例 子 使 用 HTML 5 的 Geolocation 功 能 获取 
用 户 当 前 地 理 位 置信 息 ， 然 后 将 这 个 信息 作为 标记 显示 在 谷歌 地 图 控件 上 ， 对 于 不 支持 的 旧 
版 本 浏览 嚣 将 提供 一 个 表单 ， 用 户 可 以 在 上 面 输入 地 址 ， 调 用 谷歌 提供 的 查询 API 获 取经 纬 
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QHTML 5 网 页 下 发 实 详 人 


度 标注 在 地 图 上 。 

在 打开 示例 前 请 确保 机 器 已 经 连接 上 了 互联 网 ， 使 用 最 新 版 Firefox 打 开 网 页 文件 。 
Ea 这 里 不 使 用 Chrome 的 原因 是 由 于 本 地 运行 示例 用 Chrome 浏 览 器 无 法 得 到 获取 当前 经 纬度 的 
a 权限 ， 需 把 文件 放 在 本 地 架设 的 Web 服 务 器 上 ， 如 Apache、Nginx、IIS 等 。 


起 


运行 效果 如 图 5.7 所 示 。 
显示 当前 位 置 


图 5.7 搞定 低 版 本 浏览 器 的 兼容 性 


单 击 “ 显 示 当前 位 置 ” 按 钮 ，Firefox 浏 览 器 会 提醒 是 否 “ 共 享 方位 信息 ”， 确 认 以 后 效 
果 如 图 5.8 所 示 。 


Coogle 
se 。 


图 5.8 单 击 “共享 方位 信息 ”显示 当前 位 置 


接 下 来 使 用 不 支持 Geolocation 功 能 的 浏览 器 下 8 打开 示例 ， 运 行 效果 如 图 5.9 所 示 。 
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在 文本 框 内 输入 “上 海 ”， 单 击 “定位 当前 位 置 ”， 运 
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图 5.9 IE 8 下 运行 情况 


i 
泽 
油 
过 
将 
网 
ua 
pA 
吕 
Ey 
旨 


图 5.10 IE 8 下 输入 结果 查询 


5.2.2 代码 设计 


利 


编辑 器 编辑 如 下 代码 ， 并 保存 为 “002. 搞 定 低 版 本 浏览 器 的 兼容 性 .html” 文 件 。 


<! DOCTYPE HTML> 
<html> 
<head> 
<tit1le> 搞 定 低 版 本 浏览 器 的 兼容 性 </title> 
<style> 
input 
{ 
width:80px; 


} 
/* "显示 当前 位 置 ” 按钮 样式 */ 
#see-position 
{ 
margin-bottom: 10px; 
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CH same ee 


14 上 

15 /* 地 图 容器 样式 */ 

16 #geo-map 

LE { 

18 height: 280px; 

下 width: 640px; 

20 } 

21 /* 提 示 信 息 样式 */ 

22 #geo-log 

23 { 

24 background-color: #cd4949; 

25 color: white7 

26 padding: Spx; 

27 border-radius: Spx; 

28 visibility: hidden; 

FF } 

30 </style> 

3E <script src="../js/modernizr.js"></script> 

32 <script src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 

33 <script src="http://www.google.com/uds/api?file=uds.js&amp;v 


34 =1.0gamp;key=ABQIAAAAjUOEJWNWPMVv70Q-jjS7dYxQ82LsCgTSsdpNEnBsExtoeJv4cd 
35 BSUkiLH6ntmAr 504EfjDwOa0oZBQ" 


36 type="text/javascript"></script> 

37 </head> 

38 <body> 

人 39 <header> 

40 <h2> 搞 定 低 版 本 浏览 器 的 兼容 性 </h2> 

41 </header> 

42 <section> 

43 <button id="see-position"> 显 示 当 前 位 置 </button> 
44 <span id="geo-log"></span> 

45 <div id="geo-map" class="gmap example"> 
46 <img 


47 src="http://maps.google.com/maps/api/staticmap?center=35.86166,104.195 
48 397&zoom=5&size=680x278&sensor=true" /> 


49 </div> 

50 </section> 

51 </body> 

52 <script> 

5 Modernizr.load({ 

54 test: Modernizr.geolocation, // 判断 浏览 器 是 否 支持 Geolocation 
55 yep: '../js/lz-geo.js', // 支持 Geolocation 加 载 脚本 
56 nope: '../js/1z-geo-polyfil1.js'// 不 支持 ceolocation 加 载 脚本 
57 ys 

58 </script> 

59 </html> 


代码 利用 Modernizr 库 判断 浏览 器 是 否 支持 Geolocation 特 性 加 载 不 同 脚本 ， 同 时 还 引用 了 
歌 地 图 脚本 和 谷歌 地 图 搜索 控件 脚本 。 
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编辑 器 编辑 如 下 代码 ， 并 保存 为 lz-geo-js 文 件 。 


(function (W) { 


var 
map = null, 
geo log = W.querySselector ("#geo-10g"), // 提示 信息 div 
geo map = W.querySelector ("#geo-map"), // 地 图 div 
geo button = W.querySelector ('#see-position'), // 查询 按钮 
geo={ 

// 业 务 初始 化 


init: function () { 
geo button.addEventListener('click', 
this.successPositionHandler, false); 
geo map.addEventListener('click', 
this.successPositionHandler, false); 
}, 
successPositionHandler: function () { // 成 功 获取 用 户 位 置信 息 回调 
// 当 用 户 单 击 时 ， 如 果 地 图 不 存在 ， 则 载 入 地 图 (默认 中 国 地 图 ) 
Var self = geo; 
if (!map) { 
map = new google.maps.Map(geo map, { 
EOOm: 3 
center: new google.maps.LatLng(35.86166, 
104.195397)， 
mapTypeId: google.maps.MapTypeId.ROADMAP 
站 
map.getDiv() .style-border = 'lpx solid #ccc'; 
] 7 
geo log.style.visibility = "visible'7 
geo_log.textContent = ' 查 找 当前 位 置 '; 
navigator.geolocation.getCurrentPosition(self.showPosition, 
self.handlePositionError); 
}, 
showPosition: function (position) { // 显 示 当 前 位 置 
geo_1og.textContent = "你 现在 的 位 置 在 经 纬度 (" + position. 
coords. latitude + "i "+ 
position.coords.longitude + ") " + position.coords. 
accuracy + " 米 的 范围 内 "; 
// 在 Google 地 图 上 显示 位 置 
var latLng = new google.maps.LatLng (position.coords. 
latitude, position.coords.longitude); 
Var marker = new google.maps.Marker({ position: latLng, 
map: map }); 
map.setCenter (latLng); 
map.setZoom(15); 
bs 
handlePositionError: function (error) { 
// 当 前 位 置信 息 获取 错误 ， 打 印 出 错误 信息 


geo log.textContent = error.message; 
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41 区 

42 geo.init(); 

43 }) (document); 

利用 编辑 器 编辑 如 下 代码 ， 并 保存 为 lz-geo-polyfilljs 文 件 。 

01 (function (W) { 

02 Var 

03 map = null, 

04 search key, 

05 gLocalsearch, 

06 geo_1og = W.getElementById("geo-10g"), // 提示 信息 div 

07 geo map = W.getElementById ("geo-map"), // 地 图 div 

08 geo_button = W.getElementById('see-position') // 查询 按钮 

09 下 

10 function addEvent (evnt, elem, func) { 

pp if (elem.addEventListener) 

12 elem.addEventListener (evnt， func, false); 

13 else if (elem.attachEvent) 

14 elem.attachEvent ("on" + evnt, func); 

15 else 

16 elem[evnt] = func; 

Em }s; 

18 function insertAfter (newEl, targetE]l) { 

1 Var parentEl] = targetEl .parentNode; 

20 if (ParentE1.1astchild == 七 agetE1) 

21 parentEl .appendChild (newE1) 7 

2 else 

23 parentE]l .insertBefore (newEl, targetEl.nextSibling); 

24 }; 

2 Var geo = 

26 网 下 务 初始 化 

2 indte functiom ty Tt 

28 addEvent ('click', geo button, this.successPositionHandler); 

29 addEvent ('click', geo map, this.successPositionHandler); 

30 

二 gLocalSearch = new GlocalSearch(); 

EE 4 gLocalSearch.setSearchCompleteCallback (null, 
this.showPosition); 

区 长 | thise uli()s 

34 }, 

光世 ui: function () { 

36 geo button.innerText = " 定位 当前 位 置 ' ; 

3 search key = document.createElement ('input'); 

38 insertAfter (search key, geo button); 

39 ]， 

40 successPositionHandler: function () 

41 // 当 用 户 单 击 时 ， 如 果 地 图 不 存在 ， 风 吉 入 地 图 (默认 中 国 地 图 ) 

42 Var self = geo; 

43 if (!map) { 

44 map = new google.maps.Map(geo map, { 

45 Zoom: 3, 

46 center: new google.maps.LatLng(35.86166, 
104.195397)， // 中 国 

47 mapTypeId: google.maps.MapTypeId.ROADMAP 
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48 Ds; 
49 map.getDiv() .style.border = 'lpx solid #ccc'; 
50 
号 geo log.style.visibility = "Visible'7 
92 geo_1log.innerText = ' 查 找 当前 位 置 ' ; 
53 gLocalSearch .execute (Search key.value); 
54 这 
55 // 显 示 当 前 位 置 
56 showPosition: function () { 
57 Var first = gLocalSearch.results[0]; 
58 geo_log.innerText = "你 现在 的 位 置 在 经 纬度 (" + first.lat + ", " 
59 +first.lng + ")" + first.accuracy + " 米 的 范围 内 "; 
// 在 Google 地 图 上 显示 位 置 
60 Var latLng = new google.maps.LatLng (first.lat, first.lng); 
61 Var marker = new google.maps.Marker({ position: latLng, 
map: map }); 
62 map.setCenter (latLng); 
63 map.setZoom(15); 
64 站 
65 ] 7 
66 geo.init(); 
67 }) (document); 
5.2.3 代码 分 析 
首先 看 HTML 文 件 中 的 脚本 代码 ， 如 下 所 示 : 


Modernizr.load({ 


test: Modernizr.geolocation, 
yep: '../js/lz-geo.js', 
nope: '../js/1z-geo-polyfil1.js' 


]) 


Modemizrload 方 法 用 作对 资源 进行 动态 加 载 。 示 例 中 实现 了 两 个 Polyfill， 判 断 浏览 器 是 
否 支 持 Geolocation 特 性 ， 如 果 是 则 加 载 lz-geojjs 肢 本， 不 是 则 加 载 1z-geo-polyfilljs 脚 本 。 


Polyfill 是 旧 浏 览 器 上 HTML 5 技术 或 功能 API 的 JavaScript 补 充 ， 用 于 动态 的 加 载 代 码 或 库 ， 在 
| 臣下 。 不 支持 的 浏览 器 中 模拟 HTML 5 新 特性 。GitGub 上 有 个 项 目 收集 了 目前 市 面 上 拥有 的 Polyfills， 
链接 地 址 为 https://github.cony/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills。 


接着 分 析 脚 本 lz-geo.js。 初 始 化 函 


定 successPositionHandler 事 件 。 见 lz-geo.js 文 件 第 9 行 ~ 第 12 行 。 


在 successPositionHandler 方 法 中 ， 


数 init， 分 别 在 地 图 容器 和 “显示 当前 位 置 ”按钮 上 绑 


用 户 单 击 “ 显 示 当 前 位 置 ”按钮 或 者 地 图 容器 时 ， 如 


果 地 图 实例 不 存在 ， 则 调用 谷歌 地 图 提供 的 方法 进行 地 图 对 象 实例 化 ， 并 设置 经 纬度 〈 中 心 


区 域 为 中 国 ) ， 再 调用 navigator.geolocation.getCurrentPosition 方 法 ， 传 入 两 个 回调 函数 ， 函 数 


分 别 在 成 功 和 失败 时 响应 接收 。 见 lz-geo.js 文 件 第 13 行 ~ 第 27 行 。 
在 showPosition 方 法 中 ， 该 方法 作为 回调 函数 传 入 navigator.geolocation.getCurrentPosition， 
当 浏 览 器 获取 用 户 经 纬度 成 功 后 产生 回调 ， 回 调 函 数 接收 一 个 position 对 象 ， 从 该 对 象 中 获取 


精准 度 和 经 纬度 进行 展现 ， 并 在 谷歌 地 


图 上 标注 。 见 lz-geojs 文 件 第 28 行 ~ 第 36 行 。 
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5 


在 handlePositionError 方 法 中 ， 浏 览 器 获取 用 户 当 前 经 纬度 失败 时 回调 该 方法 ， 
接收 一 个 error 对 象 ， 获 取 错 误 信 息 并 在 页 面 上 进行 提示 ， 代 码 如 下 : 


handlePositionError: function (error) { 
geo log.textContent = error.message; 


} 

分 析 完 lz-geo.js 脚 本 后 ， 看 看 当 浏览 器 不 支持 Geolocation 时 是 如 何 处 理 的 ， 代 码 在 lz-geo- 
polyfilljs 文 件 中 。 

初始 化 函数 init 的 前 两 段 代码 和 之 前 相同 ， 增 加 了 一 个 对 gLocalSearch 的 初始 化 ， 同 时 在 
其 实例 上 绑 定 查询 结束 的 监听 事件 ， 并 调用 ui 方法 为 用 户 插入 一 个 输入 框 ， 对 不 兼容 新 特性 
的 浏览 器 进行 优雅 降级 处 理 。 见 lz-geo-polyfilljs 文 件 第 27 行 ~ 第 39 行 。 

SuccessPositionHandler 方 法 与 之 前 不 同 ， 不 支持 新 特性 的 浏览 器 会 加 载 谷歌 地 图 搜索 控 
件 脚本 。 函 数 调 用 8LocalSearch 实 例 的 execute 方 法 ， 传 入 用 户 输入 的 地 址 ， 运 用 JSONP 从 谷歌 
服务 器 端 获取 可 能 的 经 纬度 列表 ， 代 码 如 下 : 


gLocalSearch.execute (search key.value); 


showPosition 方 法 已 经 在 初始 化 函数 中 绑 定 在 gLocalSearch 实 例 的 查询 回调 事件 上 ， 
execute 执 行 查询 后 该 方法 被 回调 ， 同 时 在 gLocalSearch 实 例 的 result 属 性 上 得 到 搜索 结果 ， 取 
最 靠 前 的 返回 结果 ， 并 展现 在 谷歌 地 图 上 。 见 lz-geo-polyfilljs 文 件 的 第 56 行 ~ 第 64 行 。 


5.2.4 相关 知识 


1. getCurrentPosition 方 法 


该 方法 用 于 定位 用 户 的 位 置 。 目 前 Chrome、IE 9、Firefox、Safari、Opera 支 持 地 理 定 
位 。 对 于 拥有 GPS 的 设备 ， 比 如 iPhone， 地 理 定位 将 更 加 精确 。 详 细 的 使 用 可 以 参考 http:/ 
www.w3school.com.cn/html5/html 5_geolocation.asp 中 的 内 容 。 

2. JSONP 


JSONP 是 一 个 跨 域 进行 数据 访问 传输 的 协议 。 原 理 就 是 通过 动态 创建 script 元 素 指向 数据 
服务 器 ， 利 用 JavaScript callback 的 形式 实现 跨 域 访问 。 


5.3 示例 3 创建 HTML 5 版 的 注册 页 面 


5.3.1 示例 效果 
本 示例 是 一 个 常见 的 用 户 注册 页 面 ， 表 单 由 三 个 文本 框 组 成 ， 类 型 分 别 为 email、text 和 和 
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password。 进 入 页 面 后 ，“ 电 子 邮 箱 ” 文 本 框 将 自动 获得 焦点 ， 同 时 文本 框 的 边框 会 产生 红 
色 渐变 的 效果 。 单 击 “ 昵 称 ”文本 框 ，“ 电 子 邮件 ”文本 框 的 边框 红色 消失 ， 此 时 “昵称 ” 
文本 框 的 边框 出 现 红色 渐变 效果 ，“ 密 码 ” 文 本 框 的 效果 相同 。 
使 用 支持 HTML 5 表单 新 特性 的 浏览 器 Chrome 打 开 网 页 文件 ， 运 行 效果 如 图 5.11 所 示 。 
打开 网 页 的 同时 ，“ 电 子 邮 箱 ” 文 本 框 会 渐变 为 红色 ， 运 行 效果 如 图 $.12 所 示 。 


日 
2 
R 
a 


人 上 
了 


图 5.11 HTML 5 版 的 注册 页 面 图 5.12 “电子 邮箱 ”文本 框 获得 焦点 


im 
会 
中 


和 “注册” 按钮， 进行 表单 验证 ， 运 行 效果 如 图 5.13 所 示 。 
[| 
加 请 填写 此 字段 。 
办 
本 


图 5.13 单 击 “ 注 册 ” 按 钮 


示例 中 采用 了 大 量 的 CSS 3 特效 。 刚 进入 页 面 聚焦 渐变 的 动画 、 表 单 背景 色 的 颜色 渐 
变 、 文 本 框 的 阴影 等 。 通 过 本 示例 可 以 了 解 如 何 运用 CSS 3 制作 简单 的 注册 页 面 。 


5.3.2 代码 设计 
利用 编辑 器 编辑 如 下 代码 ， 并 保存 为 “003. 创 建 HTML 5 版 的 注册 页 面 .html” 文件。 


01 <!dqoctype html> 


02 <html> 

03 <head> 

04 <style> 

05 *:focus{ outline: none; } /* 所 有 元 素 焦点 样式 */ 
06 body { text-align: center; } 

07 form /* 表单 样式 */ 

08 
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09 height: 240px; 

10 width: 400px; 

LE margin: -200px 0 0 -240px; 

2 padding: 30px; 

be; position: absolute; 

14 top: S50%7 

15 left: 50%; 

16 z-index: 0; 

17 background-color: #eee; 

18 

19 /* gradient 带 webkit 前 级 被 safari 4+，Chrome 支持 */ 

20 background-image: -webkit-gradient (linear, left top, 
left bottom, from(#fff), to(#eee)); 

21 /* linear-gradient 带 webkit 前 缀 被 Chrome 10+, Safari 5.1+, 
ios 5+ 支持 */ 

人 background-image: -webkit-linear-gradient (top, #fff, #eee); 

| /* linear-gradient 带 moz 前 缀 被 Firefox 3.6-15 支持 */ 

24 background-image: -moz-linear-gradient (top, #fff, #eee); 

25 /* linear-gradient 带 ms 前 缀 被 IE9+ 支持 */ 

26 background-image: -ms-linear-gradient (top, #fff, #eee); 

27 /* linear-gradient 带 o 前 缀 被 opera 10.5-12.00 支持 */ 

28 background-image: -o-linear-gradient (top, #fff, #eee); 

29 7 标准 格式 linear-gradient 被 Opera 10.5, IE9+, Safari 5, 

30 Chrome, Firefox 4+，ios 4, Android 2.1+ 支持 */ 

3 background-image: linear-gradient (top, #fff, #eee); 

32 /* border-radius 带 moz 前 缀 被 Firefox 3.5+ 支持 */ 

3 -moz-border-radius: 3px; 

34 /* border-radius 带 webkit 前 统 被 safari 3-4，ios 1-3.2, 
Android <1.6 支持 */ 

35 —webkit-border-radius: 3px; 

36 /* 标准 格式 border-radius 被 Opera 10.5, IE9+, Safari 5, 

37 Chrome, Firefox 4+，ios 4，Android 2.1+ 支 持 */ 

38 border-radius: 3px; 

39 

40 /* box-shadow 带 webkit 前 统 被 safari 3-4，ios 4.0.2 - 4.2， 
Android 2.3+ 支持 */ 

41 —webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 lpx lpx 

42 rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ; 

43 /* box-shadow 带 moz 前 级 被 Firefox 4+ 支持 */ 

44 -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 
0 Tpx. pz rgba(Or Ox 0 =2)r 0 3px 0 HEEEA 0 Apz 0 

a5 rgba(tOr O07 0 22) 7 

46 /* 标准 格式 box-shadow 被 Opera 10.5, IE9+, Firefox 4+, 
Chrome 6+，ios 5 支持 */ 

47 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 lpx lpx rgba(0, 

48 OF Or -2})r 0 3px 0 #4£fff; 0 Apx 0 rgba(O0r Or Or 2) 2 

49 } 

50 form:before /* before 伪 元 素 表示 在 一 个 元 素 的 内 容 之 前 插入 content 属 性 
定义 的 内 容 与 样式 */ 

光环 { 

52 content: ''; /* content 属 性 与 :befor 及 :after 伪 元 素 配合 使 用 ， 生 成 
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53 
54 
55 
56 
57 
58 
5 
60 
61 
62 
63 


64 


65 
66 
67 
68 
69 
70 
2 
4 
3 
74 
75 
76 
让 
78 
80 


81 


82 


83 
84 
85 


86 
87 
88 
89 
90 


与 机 
92 
93 


94 
95 


某 个 css 选择 器 之 前 或 之 后 的 内 容 */ 
position: absolute; 
z=Jndex> 17 
border: lpx dashed #ccc; 
top: Spx; 
bottom: Spx; 
left: 5pxs? 
rlght: Sprr 


-moz-box-shadow: 0 0 0 lpx #fff; /* Firefox 4+ */ 
-webkit-box-shadow: 0 0 0 lpx #fff; /* Safari 3-4, 
ios 4.0.2 - 4.2, Android 2.3+ */ 
box-shadow: 0 0 0 lpx #fff; /* Opera 10.5, IE9+, 
Firefox 4+, Chrome 6+, iOS 5 */ 
} 
input /* 所 有 文本 框 样式 */ 
{ 
float: left; 
padding: 15px l5px lS5px 45px; 
margin: 0 0 lO0px 0; 
width: 353px; 
border: lpx solid #CCC7 
background: #F1F]1F]1; 
font=size: LADxe 
-webkit-border-radius: Spx; 
-moz-border-radius: Spx; 
border-radius: S5px; 


-moz-border-radius: Spx; /Firefoxr 3.5T */ 

-webkit-border-radius: Spx; /* Safari 3-4, iOS 1-3.2, 
Android <1.6 */ 

border-radius: S5px; /* Opera 10.5, IE9+, Safari 5, 
Chrome, Firefox 4+, iOS 4, Android 2.1+ */ 

-moz-box-shadow: 0 lpx lpx #ccc inset, 0 lpx 0 #fff; 
/* inset 表 示 愈 内 阴影 ; Firefox 4+ */ 

-Webkit-box-shadow: 0 lpx lpx #CCC inset, 0 lpx 0 white;/* 
Sarari 3=4; 108. 4.0.2 = 4.2, Androlid 2.3+ */ 

box-shadow: 0 lpx lpx #CCC inset, 0 lpx 0 white; 
/* Opera 10.5, IE9+, Firefox 4+, 
Chrome 6+, iOS 5 */ 


/* ease (逐渐 慢 下 来 ) ; 1inear (匀速 ) ;ease-in (由 慢 到 快 ) ;ease-out (由 
快 到 慢 ) ;ease-in-out ( 先 慢 到 快 再 到 慢 ) */ 
-webkit-transition: all 0.5s ease-in-out; 
/* Safari 3.2+, Chrome */ 
-moz-transition: all 0.5s ease-in-out; /* Firefox 4-15 */ 
-o-transition: all 0.5s ease-in-out; /* Opera 10.5-12.00 */ 
transition: all 0.5s ease-in-out; /* Firefox 16+, 
Opera 12.50+ */ 
. 
input:focus /* 所 有 文本 框 焦点 样式 */ 
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96 机 

3 background-color: #fff; 

98 border-color: #e8c291; 

outline: none; 

100 -moz-box-shadow: 0 0 0 lpx #e8c291 inset; 

101 —webkit-box-shadow: 0 0 0 lpx #e8c291 inset; 

102 box-shadow: 0 0 0 lpx #e8c291 inset; 

103 } 

104 input:hover /* 所 有 文本 框 鼠 标 悬 停 样式 */ 

105 :| 

106 border-color: inherit !important; 

107 background-color: #EfEfEf; 

108 -webkit-border-radius: S5px 0 0 Spx; 

109 -moz-border-radius: 5px 0 0 Spx; 

110 border-radius: S5px 0 0 5px7 

1 

L112 input:not(:focus) { opacity: 0.6; } /* 所 有 文本 框 非 焦点 样式 */ 

113 input:valid { opacity: 0.8; } /* 所 有 文本 框 输入 有 效 样式 */ 

114 input:focus:invalid /* 所 有 文本 框 获得 焦点 但 输入 无 效 样式 */ 

EE { 

116 border: lpx solid red; 

117 background-color: #FFEFFO; 

118 } 

119 section { width: 400px; margin: 0 auto; } /* 章节 样式 */ 

120 .clearfix { clear: both; } /* 清除 浮动 样式 */ 

EL2 #submit:hover, /* 提交 按钮 鼠标 悬 停 和 焦点 样式 */ 

122 #submit:focus 

123 中 

124 background-color: #FDDB6F; 

I25 

126 /* 可 以 参考 form 样 式 中 的 gradient 注 释 */ 

2 background-image: -webkit-gradient (linear, left top, 
left bottom, from(#FFB94B), to(#FDDB6F)); 

128 background-image: -webkit-linear-gradient (top, #FFB94B, 
#FDDB6F); 

be background-image: -moz-linear-gradient (top, #FFB94B, 
#FDDB6F); 

130 background-image: -ms-linear-gradient (top, #FFB94B, 
#FDDB6F); 

U3 background-image: -o-linear-gradient (top, #FFB94B, 
#FDDB6F); 

L322 background-image: linear-gradient (top, #FFB94B, #FDDB6F); 

133 1 

134 #submit /* 提交 按钮 样式 */ 

135 { 

136 background-color: #FFB94B; 

137 border-width: lpx; 

138 border-style: solid; 

L393 border-color: #D69E31 #E3A037 #D5982D #E3A037; 

140 float: left; 

141 height: 35px; 
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142 padding: 0; 

143 width: 120px; 

144 Cursor: pointer; 

145 font: bold 15px Arial, Helvetica; 

146 color: #8F5AOA; 

1 margin: 20px 0 0 0; 

148 

149 /* 可 以 参考 form 样 式 中 的 gradient 注 释 */ 

150 background-image: -webkit-gradient (linear, left top, 
left bottom, from(#FDDB6F), to(#FFB94B)); 

二 5 background-image: -webkit-linear-gradient (top, #FDDB6F, 
#FFB94B); 

L522 background-image: -moz-linear-gradient (top, #FDDB6F, 
#FFB94B); 

L553 background-image: -ms-linear-gradient (top, #FDDB6F, 
#FFB94B); 

154 background-image: -o-linear-gradient (top, #FDDB6F, 
#FFB94B); 

155 background-image: linear-gradient (top, #FDDB6F, #FFB94B); 

156 

157 /* 可 以 参考 form 样 式 中 的 border-radius 注 释 */ 

158 -moz-border-radius: 3px; 

E59 -webkit-border-radius: 3px; 

160 border-radius: 3px; 

161 

162 /* 给 文字 加 上 阴影 早 在 css 2 中 已 经 出 现 */ 

163 text=shadow:’ 0 1px 0 rgba(255, 255; 2557 0.5})s 

164 

165 /* 可 以 参考 form 样 式 中 的 box-shadow 注 释 */ 

166 -moz-box-shadow: 0 0 lpx rgba(0, 0, 0, 0.3), 0 lpx 
0 rgba(255, 255, 255, 0.3) inset; 

167 -webkit-box-shadow: 0 0 lpx rgba(0, 0, 0, 0.3), 0 lpx 
0 rgba(255, 255, 255, 0.3) inset; 

168 box-shadow: 0 0 lpx rgba(0, 0, 0, 0.3), 0 lpx 0 rgba 
{255r 255. 2557 0.3) insets 

169 中 

170 .item-name { background: url(../images/user.png) 10px llpx 
no-repeat; } /* 昵称 背景 样式 */ 

171 .item-email { background: url(../images/email.png) 10px 
11px no-repeat; }  /* 密码 背景 样式 */ 

L322 .item-password { background: url(../images/keys.png) 10px 
11px no-repeat; } /* 电子 邮箱 背景 样式 */ 

173 </style> 

174 <BCrIpt src=". /Js/Jquery 1.8.31s"></script> 

下 了 号 <script src="../js/modernizr.custom.2.6.2.js"></script> 

176 </head> 

177 <body> 

178 <header><h2> 搞 定 输入 框 自动 聚焦 </h2></header> 

I <section> 

180 <form action= method="post"> 

181 <div class="clearfix"> 
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182 <!-- 第 1 个 autofocus --> 
183 <input type="email" tabindex="1" 
id="email" class="item-email™ placeholder=" 电 子 邮 箱 " autofocus required/> 
184 </div> 
185 <div class="clearfix"> 
186 <!-- 第 2 个 autofocus --> 
187 <input type="text" tabindex="2" id="name" class="item- 
188 name"” placeholder=" 了 昵称 ”autofocus required/> 
189 </div> 
190 <div class="clearfix"> 
191 <!-- 第 3 个 autofocus --> 
二 92 <input type="password" tabindex="3" id="password" 


193 class="item-password" placeholder=" 密 码 " autofocus autocomplete="off" 
194 required/> 


L195 </div> 

196 <div class="clearfix"><input type="submit" tabindex="4" 
id="submit"” value=" 注 册 " /></div> 

L97 </form> 

198 </section> 


199 </body> 
200</html> 


诺 = 在 代码 中 可 以 看 到 很 多 样式 前 带 有 -webkit、-moz、-0、-ms 的 前 级 ， 注 释 中 给 出 了 浏览 器 的 
只。 支持 情况 。 想 更 多 地 了 解 各 浏览 器 前 级 ， 可 以 参考 网 站 http://css3please.com 中 的 内 容 。 


5.3.3 代码 分 析 


本 示例 侧重 从 CSS 3 出 发 ， 介 绍 如 何 构建 一 个 注册 页 面 ， 下 面 讲解 其 中 用 到 的 CSS 3 技巧 。 

代码 19~31 行 、126~132 行 、149~155 行 使 用 了 CSS 3 Gradient。 渐 变 分 为 线性 渐变 (Linear 
Gradients) 和 径 向 渐变 (Radial Gradients) 。 这 里 使 用 了 线性 渐变 ，WebKit 内 核 的 浏览 器 语 
法 如 下 : 


-webkit-gradient (<type>, [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 


WebKit 下 Gradient 的 使 用 语法 如 图 5.14 所 示 。 


类 型 点 终止 颜色 
-mebkit-gradient (linear, left top, left bottom, from(#fff), to(#eee)) 


图 5.14 WebKit 下 Gradient 使 用 


第 一 个 参数 表示 渐变 类 型 ， 分 为 linear (线性 渐变 ) 和 radial( 径 向 渐变 ) 两 种 。 第 二 个 
和 第 三 个 参数 分 别 表示 渐变 的 起 点 和 终点 ， 可 以 用 坐标 形式 或 方位 值 ， 比 如 right top (右上 
角 ) 和 right bottom 〈 右 下 角 ) ， 也 可 以 使 用 角度 ， 比 如 red 10%。 第 四 个 和 第 五 个 参数 表示 起 
始 和 终止 的 渐变 颜色 。 

标准 浏览 器 的 Gradient 语 法 如 下 : 
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linear-gradient([point || angle,]? stop, stop [, stop]*) 


标准 浏览 嚣 下 Gradient 的 使 用 如 图 5.15 所 示 。 


起 始 颐 色 
linear -gradient (top, #fff， #eee) 
新 变 起 点 了 7 下 终止 杖 色 
图 5.15 标准 浏览 器 下 Gradient 的 使 用 


标准 浏览 器 下 Gradient 的 渐变 类 型 不 在 第 一 个 参数 上 ， 而 是 写 在 样式 名 称 上 。 第 一 个 参 
数 表示 渐变 的 起 点 ， 可 以 使 用 方位 值 或 者 角度 值 ， 第 二 个 和 第 三 个 参数 和 WebKit 相 同 。 


棍 _ 
| 苞 直 想 更 多 了 解 Gradient 的 使 用 ， 可 以 参考 网 站 http://css-tricks.com/examples/CSS 3Gradient/。 


代码 32~38 行 、79~81 行 、108~110 行 、158~160 行 使 用 了 CSS 3 的 border-radius， 中 文 意思 
“ 圆 角 ”， 语 法 如 下 : 

border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 

其 中 length 是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 可 以 使 用 em、ex、pt、px、 百 分 
比 等 等 ， 不 可 为 负 值 。 圆 角 还 有 其 他 一 些 相关 属性 ， 如 border-top-right-radius，border-bottom- 
right-radius, border-bottom-left-radius, border-top-left-radius。 

代码 40~47 行 、62~64 行 、82~85 行 、100~102 行 、165~168 行 使 用 了 CSS 3 的 box-shadow， 
语法 如 下 : 

box-shadow : <length> <length> <length> <length> || <color> 

参数 说 明 : 阴影 水 平 偏 移 值 (可 取 正 负 值 ) ， 阴 影 垂 直 偏 移 值 (可取 正 负 值 ); 阴影 i 
框 ， 阴 影 模糊 值 ， 阴 影 颜色 。 

例子 中 使 用 的 盒 阴影 效果 属于 盒 外 阴影 ， 除 此 之 外 还 有 盒 内 阴影 ， 使 用 时 增加 一 个 
inset， 代 码 如 下 所 示 : 

box-shadow : inset lO0px lO0px Spx #000000; 

如 果 还 想 了 解 更 多 的 盒 阴 影 ， 可 以 去 http://www.css3maker.com/box-shadow.html 感 受 一 下 
box-shadow 的 强大 效果 。 


5.3.4 相关 知识 


CSS 3 浏览 器 前 缀 

浏览 器 厂商 会 预先 支持 一 些 还 处 在 草案 状态 下 的 CSS 属 性 ， 为 了 做 区 分 所 以 在 样式 名 前 
加 上 各 自 的 前 经。 目前 常用 的 前 级 有 -webkit、-moz、-ms、-0o。 假 如 在 项 目 中 想 使 用 最 新 的 
CSS 3 属性 ， 又 不 想 写 那么 多 前 级， 可 以 使 用 一 个 JavaScript 的 解决 方案 ， 该 项 目地 址 为 https:// 
github.com/LeaVerou/prefixfree/。 
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5.4 示例 4 用 HTML 5 的 验证 方法 


验证 注册 


5.4.1 示例 效果 


页 面 


本 示例 采用 HTML 5 的 验证 方法 验证 通用 的 注册 表单 。 用 户 输入 注册 表单 的 注册 信息 ， 


单 击 “ 注 册 ” 按 钮 ，HTML 5 表单 调用 浏览 器 内 置 表单 验证 方法 ， 当 验证 不 通过 时 ， 表 单 不 


能 提交 ， 界 面 上 提示 出 错 信 息 。HTML 5 通过 内 置 的 表单 验证 ， 可 以 完成 一 般 的 验证 功能 。 
一 般 表单 验证 的 主要 目的 是 纠正 用 户 的 输入 错误 信息 ， 并 及 时 提醒 用 户 输入 正确 的 数 

据 。 以 往 的 表单 验证 ， 需 要 开发 者 写 一 堆 JavaScript 的 逻辑 判断 。 进 一 步 思 考 ， 表 单 验 证 可 

以 理解 为 一 个 系统 ，HTML 5 已 经 内 置 了 这 一 套 验 证 机 制 ， 其 通过 8 种 验证 验证 机 制 ， 验 证 


HTML 5 表单 。 


号 码 、 生 日 、QQ 号 码 、 个 人 站 点 、 密 码 、 


本 示例 表单 验证 包括 用 户 名 、 电 子 邮箱 、 手 机 
重复 登录 密码 。 


拘 _ 
| 臣下 该 示例 请 用 Chrome 浏 览 器 打开 。 


使 用 Chrome 浏 览 器 打开 示例 文件 ， 运 行 效果 如 


图 5.16 所 示 。 


验证 不 通过 时 ， 提 示 信息 如 图 5.17 所 示 。 


示例 004 月 HTML5 的 验证 方法 验证 注册 页 面 
用 户 各 


电子 部 箱 


生日 ”yy/mm/dd 图 v 


注册 


图 5.16 表单 验证 注册 页 面 


示例 004 用 HTML5 的 验证 方法 验证 注册 页 面 


二 户 各 
电子 邮箱 “| 加 请 填写 此 字段 。 = 


Fs 


图 5.17 用 户 名 为 空 时 的 出 错 提示 信息 
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5.4.2 代码 设计 
利用 编辑 器 编辑 如 下 代码 ， 并 保存 为 “004. 用 HTML 5 的 验证 方法 验证 注册 页 面 htnl” 文件 。 


01 
02 
03 
04 
05 
06 


07 
08 
09 


10 
11 
12 
13 
14 
15 
16 
BE 
18 
20 
2 
了 
23 
24 
25 
26 


2 
28 
2 
30 
入 时 
32 
39 
34 
35 
36 
33 
3 
3 
40 


41 
42 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 

<title> 示 例 004 用 HTMI 5 的 验证 方法 验证 注册 页 面 </title> 

<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.min. 
css" type="text/css"> 

<style type="text/css"> 

body{ 

margin:50px auto;width:430px;padding:20px;border:1lpx solid 

#c88e8e; 


border-radius: 15px; <!-- 设置 圆 角 --> 
</style> 
</head> 
<body> 
<!-- 引用 bootstrap 的 块 样式 --> 
<blockquote> 
<p> 示 例 004 用 HTML 5 的 验证 方法 验证 注册 页 面 </p> 
</blockquote><!-- 块 结束 --> 
<!-- 表单 开始 --> 
<form class="form-horizontal" name="myform"> 
<div class="control-group"> 
<label class="control-label"” for="username"> 用 户 名 </1label> 
<div class="controls"> 
<!-- require 在 表单 控件 中 将 required 特 性 设置 为 true --> 
<input type="text" name="username" id="username" 
required> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label"” for="email"> 电 子 邮箱 </label> 
<div class="controls"> 
<!--- 指定 表单 控件 的 type 特 性 值 为 email， 设 置 required 为 true --> 
<input type="email" name="email" id="email" required> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label"” for="phone"> 手 机 号 码 </label> 
<div class="controls"> 
<! 一 在 表单 控件 上 设置 pattern 特 性 ， 电 话 号 码 以 13、15 或 者 18 开 头 共 11 位 --> 
<input type="text" id="phone" pattern="^((13)118115)+ 


\d{9}$" name="phone"> 
</div> 
</div> 
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43 <div class="control-group"> 

44 <label class="control-label" for="birth"> 生 日 </label> 

45 <div class="controls"> 

46 <!-- 指定 表单 控件 的 type 特 性 值 为 date --> 

47 <input type="date" id="birth" name="birth"> 

48 </div> 

49 </div> 

50 <div class="control-group"> 

hs <label class="control-label" for="qq">QQ</label> 

52 <div class="controls"> 

.3 3 在 表单 控件 上 设置 pattern 特 性 ， 了 设置 required 为 true ee 

54 <input type="text" required pattern="[1-9] [0-9] {4}" 
id="qq" name="qq"> 

汪 </div> 

56 </div> 

el <div class="control-group"> 

58 <label class="control-label” for="domain"> 个 人 站 点 </1label> 

59 <div class="controls"> 

60 <!-- 指定 表单 控件 的 type 特 性 值 为 url1， 设 置 required 为 true--> 

61 <input type="url" required id="domain" name="url"> 

62 </div> 

63 </div> 

64 <div class="control-group"> 

65 <label class="control-1abel"” for="domain"> 密 码 </label> 

66 <div class="controls"> 

67 <!-- 设置 required 为 true 密码 最 小 长 度 为 6 至 10 位 --> 

68 <input type="password" required min="6" max="10" 
id="password" name="password"> 

69 </div> 

70 </div> 

71 <div class="control-group"> 

72 <label class="control-label"” for="domain"> 重 复 登录 密码 
</label> 

3 <div class="controls"> 

74 <!-- 设置 required 为 true 重复 密码 长 度 为 6-10 位 ， 设 置 自 定义 验证 规则 --> 

35 <input type="password" required id="repassword" min= 
"6" max="10" 

76 oninput="customvalid(this)" name="repassword"> 

77 </div> 

78 </div> 

LS <div class="control-group"> 

80 <div class="controls"> 

81 <button type="submit" class="btn"> 注 册 </button> 

82 </div> 

83 </div> 

84 </form> 
并 表单 结束 Lb 

85 <script type="text/javascript"> 

86 function customvalid(o){ 

87 Var Vv = o.validity, 

// 获 取 重 复 登录 密码 的 Validatystat 对 象 
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88 password = document .querySelector ("#password"); 
// 获 取 登 录 密 码 的 表单 控件 

89 if(o.value !== password.value){ 

// 比 较 密 码 与 重复 登录 密码 的 值 是 否 相等 

90 o.setcustomValidity ("两 次 输入 的 密码 不 一 致 ! ") ; 
// 两 次 输入 的 密码 不 一 致 ， 自 定义 错误 信息 

91 }else{ 

Pa o.setCustomValidity(""); 
// 验 证 通过 ， 清 除 出 错 信息 

93 } 

94 } 

95 </script> 

96 </body> 

97 </html> 


5.4.3 代码 分 析 


1. validity 属 性 


HTML 5 引入 了 8 种 用 于 验证 表单 控件 数据 正确 性 的 方法 ， 分 别 是 valueMissing 〈 值 丢 
失 ) 、typeMisMatch (类 型 不 匹配 ) 、pattenMismatch 〈 模 式 不 匹配 ) 、tooLong (字符 太 


长 ) 、rangeUnderflow (范围 下 溢 ) 、rangeOverflow (范围 上 溢 ) 、stepMismath( 步 阶 不 
配 ) 和 customError ( 自 定义 错误 ) 。 
HTML 5 的 表单 控件 新 增 了 一 个 属性 为 validity， 如 下 : 


document .myform.username.validity 


validity 为 ValidityState 对 象 ， 除 包含 了 上 述 的 8 个 属性 外 ， 还 有 一 个 属性 是 valid， 当 表 
验证 执行 完毕 ， 会 返回 一 个 布尔 值 ， 它 表示 表单 控件 是 否 已 通过 了 所 有 的 验证 约束 条 件 


单 


匹 


o 


可 以 把 valid 属 性 看 做 是 最 终 验证 结果 ， 当 表单 验证 的 8 个 约束 条 件 都 验证 通过 ， 则 valid 就 为 


true， 反 之 ， 只 要 有 一 项 未 验证 通过 ，valid 就 为 false。 
valueMissing 表 示 确 保 表单 控件 的 值 已 填写 ， 使 用 方法 ， 在 表单 控件 上 添加 required， 


比 


较 表 单 控件 的 valueMissing 是 否 为 tue， 如 果 为 tue， 则 修改 出 错 信息 。 如 修改 “用 户 名 ”出 错 


时 的 出 错 信息 为 “用 户 名 不 能 为 空 ”， 代 码 如 下 : 


<!-- HTML 代码 --> 
用 户 名 : <input type="text" required id="username" name="username" 
onblur="valit username();"/> 
<!-- Javascript 代码 --> 
<script> 
function valit username(){ 
Var username = document .querySelector ("#username"); 
// 获 取 用 户 名 表单 控件 
if(true == username.validity.valueMissing){ 
// 判 断 用 户 名 是 否 为 空 
username .setCustomValidity(' 用 户 名 不 能 为 空 ') ; 
// 验 证 失败 ， 修 改 提示 信息 
}elsef{ 
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username.setCustomValidity(''); // 清 除 出 错 信 息 
} 
} 
valit username () 7 // 出 错 信息 初始 化 
</script> 


typeMismatch 表 示 保 证 表单 控件 值 与 预期 类 型 相 匹 配 ， 预 期 类 型 包括 url、email、 


number。 

使 用 方法 : 在 表单 控件 上 设置 type 值 为 url、email、number 之 一 。 如 验证 电子 邮件 ， 当 电 
子 邮件 的 格式 不 正确 时 ， 改 变 “电子 邮箱 ”默认 的 提示 信息 为 “电子 邮箱 格式 不 正确 ”， 代 
码 如 下 : 


<!-- HTML 代码 --> 
电子 邮箱 : <input type="email" required id="email" name="email" 
onblur="valit email();"/> 
<!-- Javascript 代码 --> 
<script> 
function valit email(){ 
Var email = document.querySelector ("#email"); 
// 获 取 电 子 邮 箱 表单 控件 
if(true == email.validity.typeMismatch){  // 判 断 电 子 邮 箱 格式 是 否 正 确 
email.setCustomValidity('" 电 子 邮 箱 格式 不 正确 ') ; 
// 验 证 失败 ， 修 改 提示 信息 
J}else{ 
email.setCustomValidity(''); // 清 除 出 错 信 息 


} 
} 
valit email(); 
</script> 


pattemmMismatch 表 示 验 证 表单 控件 值 与 其 pattern 设 置 的 正则 表达 式 相 匹配 。 
使 用 方法 : 在 表单 控件 上 设置 pattern 的 值 为 要 验证 的 正则 表达 式 ， 如 验证 手机 号 码 是 否 
正确 ， 代 码 如 下 : 


<!-- HTML 代码 --> 
<input type="text" id="phone" required pattern="^((13)|18|15)+\d{9} 
$" name="phone" onblur="valit phone()"> 
<!-- Javascript 代码 --> 
<script> 
function valit phone(){ 
Var phone = document .querySelector ("#phone"); 
// 获 取 手 机 号 码 表单 控件 
if(true == phone.validity.typeMismatch){ 
// 判 断 手 机 号 码 是 与 正则 表达 式 匹配 
// 验 证 失败 ， 修 改 提 示 信 息 
phone.setcustomValidity(' 手 机 号 码 必 须 是 以 13、15、18 开 头 的 11 位 
数 子 WF 


}elsef{ 
phone.setCustomValidity(''); 


// 清 除 出 错 信息 
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} 
3 
valit phone(); 
</script> 


tooLong 表 示 限 制 最 长 的 字符 数 ， 在 表单 控件 上 设置 maxlength 属 性 值 ， 使 用 代码 如 下 : 
<input type="text" maxlength="30" /> 
IE 虽然 表单 控件 通常 会 在 用 户 输入 时 限制 最 大 长 度 〈 如 maxLength 设 为 20， 用 户 无 法 输入 第 21 
< 个 字符 ) ， 但 在 有 些 情况 下 〈 如 通过 程序 设置 ) ， 还 是 会 超出 最 大 值 。 
rangeUnderflow 表 示 限 制 数字 控件 的 最 小 值 ， 在 表单 控件 上 设置 min 属 性 的 值 ， 使 用 代码 
如 下 : 
<input type="range" min="6" /> 
可- 一 般 该 属性 比较 少 用 ， 但 在 需要 做 数值 范围 检查 的 表单 控件 中 ， 数 值 很 可 能 会 暂时 低 于 设置 的 
医 " 下 限 。 如 果 通 过 程序 设置 表单 控件 的 值 小 于 min 的 值 ， 浏 览 器 会 自动 把 该 值 设 置 为 最 小 值 6。 
rangeOverflow 表 示 限 制 数 字 控 件 的 最 大 值 ， 在 表单 控件 上 设置 max 属 性 的 值 ， 使 用 代码 
如 下 : 


<input type="range" max="50" /> 


| 区 如 果 通 过 程序 设置 表单 控件 的 值 为 max 的 值 ， 浏 览 器 会 自动 把 该 值 设置 为 最 大 值 50。 


stepMismath 表 示 确 保 输入 值 符合 min、max 及 step 的 步 阶 ， 在 表单 控件 上 设置 step 属 性 的 
值 ， 使 用 代码 如 下 : 
<input type="range" step="10" min="5" max="200" /> 


如 果 通 过 程序 设置 表单 控件 的 值 小 于 min 值 ， 浏 览 器 会 自动 把 该 值 设置 为 最 小 值 5。 如 果 大 于 
195， 则 浏览 器 会 把 该 值 设置 为 195。 


查 _ 
| 凤 


customError 表 示 自 定义 验证 方法 。 
当 以 上 7 种 验证 模式 的 出 错 信息 无 法 满足 业务 需求 ， 可 以 使 用 自 定义 的 出 错 信息 。 在 表 
单 控件 上 设置 自 定义 验证 出 错 信息 ， 代 码 如 下 : 


document .querySelector ("#password") . setcustomValidity ("两 次 输入 的 密码 不 一 致 ! ") ; 


查 _ 
| 切入。 当 验 证 通过 后 ， 需 要 手动 清除 出 错 信息 。 


document .querySelector ("#password") 。 setCustomValidity(""); 
2. 示例 代码 分 析 
第 6 行 代码 引 入 Bootstrap CSS 库 美化 界面 ， 代 码 如 下 : 
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<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.min.css" 
type="text/css"> 


提 _ 
le 更 多 Bootstrap 知 识 ， 请 参考 网 站 https://twitter.github.com/bootstrap。 


第 26 行 设置 “用 户 名 ”为 必 填 项 ，“ 用 户 名 ”为 空 时 ， 验 证 失败 ， 其 valueMissing 值 返回 
true， 代 码 如 下 : 


<input type="text" name="username" id="username" required> 


让 读者 可 通过 Chrome 浏 览 器 控制 台 输 入 document.myform.username.validity.valueMissing 查 看 
< valueMissing 值 ， 验 证 通过 时 ， 其 值 为 false， 验 证 不 通过 其 值 为 tue。 


第 33 行 设置 “电子 邮箱 ”的 类 型 为 email，“ 电 子 邮 箱 ” 为 必 填 项 。 其 实 是 先 验证 必 填 ， 


再 验证 是 否 是 有 效 的 电子 邮箱 。 当 该 项 值 为 空 时 ，valueMissing 返 回 true; 当 不 符合 电子 邮箱 
格式 时 ，typeMismatch 返 回 true。 


去 读者 可 通过 Chrome 浏 览 器 控制 台 输 入 document.myform.email.validity.typeMismatch 查 看 
La typeMismatch 值 。 


第 40 行 设置 “手机 号 码 ”验证 方式 为 正则 表达 式 验证 ，“ 手 机 号 码 ” 必 须 是 以 13、15、 
18 开 头 的 11 位 数字 ， 当 手机 号 码 不 合法 时 ，pattemMismatch 返 回 true， 代 码 如 下 : 


<input type="text" id="phone" pattern="^((13)|118|15)+\d{9}$" name="phone"> 


EE 读者 可 通过 Chrome 浏 览 器 控制 台 输 入 document.myform.email.validity.patternMismatch 查 看 
医 patternMismatch 值 。 


第 47 行 设置 “生日 ”为 日 期 型 ， 如 果 输 入 为 非 日 期 型 数据 ， 当 鼠标 离开 输入 框 后 ， 输 入 
框 清空 。 

第 61 行 设置 “个 人 站 点 ”的 类 型 为 url， 当 输入 数据 为 不 合法 的 url 时 ， 验 证 不 通过 ， 
typeMismatch 返回 true。 

第 68 行 设置 “密码 ”的 验证 规则 为 必 填 项 ， 最 小 位 数 为 6 位 ， 最 大 位 数 为 10 位 ， 当 有 一 
项 验证 不 通过 ， 则 提示 出 错 。 

第 75 行 和 第 76 行 除了 与 “密码 ”一 样 的 验证 规则 外 ， 同 时 定义 了 oninput 事 件 用 来 自 定义 
验证 规则 ， 当 “重复 登录 密码 ”与 “密码 ”不 一 致 时 ， 提 示 出 错 信 息 。 

第 85 行 ~ 第 93 行 ， 定 义 customvalid 函 数 ， 当 “重复 登录 密码 ”与 “密码 ”不 一 致 时 ， 

setCustomValidity 设 置 “重复 登录 密码 ”表单 控件 的 出 错 信 息 为 “两 次 输入 的 密码 不 一 
致 ! ”， 否 则 设 为 空 。 


5.4.4 相关 知识 


HTML 5 CSS 选 择 器 API 
W3C 发 布 了 一 组 通过 CSS 选 择 器 来 获取 DOM 节 点 的 API 规 范 ， 如 document. 
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querySelector(selector)、document.querySelectorAll()。 该 规范 的 参考 网 站 为 http://www. 
w3.org/TR/2012/WD-selectors-api-20120628/ 和 http://www.w3.org/TR/2012/WD-selectors- 


api2-20120628/。 


59.59 示例 5 搞定 输入 框 自动 聚焦 问题 


5.5.1 示例 效果 


本 示例 会 演示 一 个 HTML 5 新 属性 autofocus。autofocus 的 功能 是 当 页 面 加 载 时 ， 元 素 自动 
获得 焦点 。 平 时 可 以 使 用 这 一 属性 增强 表单 的 用 户 体验 ， 不 过 使 用 时 需 小 心 ， 这 个 新 属性 在 
各 个 浏览 器 上 的 表现 有 一 定 的 差异 。 使 用 Chrome 浏 览 器 打开 网 页 文件 ， 如 图 5.18 所 示 。 

再 使 用 Firefox 浏 览 器 打开 网 页 文件 ， 如 图 5.19 所 示 。 


回 图 上 =i 
上 上 

[Ri 只 
| ha) 


图 5.19 使 用 Firefox 打 开 网 页 文件 


图 5.18 使 用 Chrome 打 开 网 页 文件 


当 一 个 表单 内 出 现 了 多 个 带 有 autofocus 属 性 的 元 素 时 ，Chrome 和 Firefox 会 有 不 同 的 表现 
形式 。Chrome 会 将 焦点 放 到 最 后 一 个 带 有 autofocus 属 性 的 元 素 ， 而 Firefox 则 将 焦点 放 到 第 一 
个 带 有 autofocus 的 元 素 。 根 据 W3C (World Wide Web Consortium， 万 维 网 联盟 ) 的 规定 ， 表 


单 内 不 应 该 出 现 一 个 以 上 的 自动 对 焦 元 素 ， 所 以 在 使 用 的 时 候 请 务必 注意 这 个 浏览 器 在 新 标 
准 上 实现 的 差异 ， 详 见 网 址 http://www.w3.org/wiki/HTML5_form additions#autofocus。 
接着 使 用 IE 8 打开 文件 ， 如 图 5.20 所 示 。 


Ne 


图 5.20 使 用 正 8 打开 网 页 文件 
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于 IE 8 不 支持 autofocus 新 属性 ， 所 以 这 里 使 用 脚本 模拟 对 应 行为 ， 采 用 Firefox 的 默认 


| 二。 条 Firefox 的 效果 是 考虑 到 表单 的 输入 顺 库 是 至 上 而 下 的 ， 所 以 应 该 选择 最 先 出 现 autofocus 
名。 的 那个 元 素 。 
5.5.2 代码 设计 

利用 编辑 器 打开 “005 .搞定 输入 框 自动 聚焦 -html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 


02 <html> 

03 <head> 

04 <style> 

05 /* 省 略 样式 ， 因 样式 与 示例 003 相 同 */ 

06 </style> 

07 <script sr ../js/jquery-1.8.3.js"></script> 

08 <script src="../js/modernizr.custom.2.6.2.js"></script> 
09 </head> 

10 <body> 

0 <header><h2> 搞 定 输入 框 自动 聚焦 </h2></header> 

12 <section> 

3 <form action="" method="post"> 

14 <div class="clearfix"> 

15 <!-- 第 1 个 autofocus --> 

16 <input 七 Ype="email"”tabindex="1"” id="email" 


class="item-email" placeholder=" 电 子 邮 箱 " 
17 autofocus required/> 


18 </div> 

I <div class="clearfix"> 

20 <!-- 第 2 个 autofocus --> 

2 <input type="text" tabindex="2" id="name" class="item- 

22 name"” placeholder=" 昵 称 " autofocus required/> 

23 </div> 

24 <div class="clearfix"> 

2 l== 第 3 个 autofocus == 

26 <input type="password" tabindex="3" id="password" 

27 class="item-password" placeholder=" 密 码 " autofocus autocomplete="off" 
required/> 

28 </div> 

29 <div class="clearfix"><input type="submit" tabindex="4" 
id="submit" value=" 注 册 " /></div> 

30 </form> 

</section> 


32 </body> 

33 <script> 

34 $ (document) .ready (function () { // 绑 定 浏览 器 domready 事 件 
35 if (!Modernizr.input.autofocus) { 


// 判 断 浏览 器 是 否 支持 input 的 autofocus 属 性 
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36 $('input[autofocus]') .eq(0) .trigger('focus'); 
// 获 取 第 一 个 带 有 autofocus 属 性 的 input 并 设置 焦点 

37 时 让 

38 ]) 


39 </script> 
40 </html> 


提 = 
| 国 下 。 由 于 代码 与 示例 003 多 数 相同 ， 这 里 只 贴 出 差异 部 分 ， 请 读者 注意 。 


5.5.3 代码 分 析 


本 示例 需要 引用 jQuery 和 Meodernizr 两 个 类 库 ， 利 用 类 库 在 不 支持 autofocus 的 情况 下 进行 
行为 模拟 。 见 代码 第 34~38 行 。 

第 34 行 添加 浏览 器 的 DOM 加 载 事件 监听 ， 所 有 业务 逻辑 代码 均 在 DOM 加 载 完 毕 以 后 执 
行 ， 代 码 如 下 : 


$ (document) .ready (function() {}); 


攀 _ 
| 四 下。 想 了 解 更 多 ready 函 数 用 法 可 以 参考 网 站 http://apijquery conyready/。 


第 35 行 代码 使 用 Modernizr 库 判断 浏览 器 是 否 支持 input 的 autofocus 属 性 。 

第 36 行 代码 在 判断 浏览 器 不 支持 autofocus 的 情况 下 执行 。 获 取 页 面 上 所 有 带 autofocus 属 
性 的 input 元 素 ， 并 匹配 第 0 个 索引 ， 触 发 focus 事 件 设置 焦点 。 

可 以 注意 到 表单 里 共有 三 个 带 autofocus 属 性 的 input 元 素 ， 分 别 为 “电子 邮箱 ”、“ 昵 
称 ” 和 “密码 ”。 在 Firefox 和 IE 8 中 ， 页 面 加 载 完毕 以 后 会 自动 将 焦点 放 到 “电子 邮箱 ”， 
Chrome 则 将 焦点 放 到 “密码 ”文本 框 。 


5.5.4 相关 知识 


1. DOMReady 与 window.onload 区 别 
在 刚才 的 示例 中 ， 所 有 的 脚本 逻辑 均 在 DOM 加 载 完 毕 以 后 执行 。 也 就 是 说 DOMReady 是 
在 所 有 DOM 节 点 全 部 加 载 完成 后 触发 ， 而 window.onload 则 表示 页 面 上 的 所 有 资源 加 载 完成 
(包含 图 片 、Flash 等 ) ， 时 间 会 比 DOMReady 长 。 可 惜 的 是 DOMReady 并 不 是 浏览 器 原生 支 
持 的 事件 ， 不 过 不 用 担心 ， 市 面 上 各 种 类 库 都 提供 了 对 应 的 实现 ， 如 MooTools、YUI 等 。 
2. W3C 
万 维 网 联盟 ， 又 称 W3C 理 事 会 。1994 年 10 月 在 麻 省 理工 学 院 计算 机 科学 实验 室 成 立 ， 建 
立 者 是 万 维 网 的 发 明 者 蒂 姆 。 伯 纳 斯 。 李 。 
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5.6 示例 6 搞定 表单 的 自动 完成 


5.6.1 示例 效果 


本 示例 会 演示 一 个 HTML 5 新 属性 autocomplete， 当 表单 页 面 重 新 加 载 ， 电 子 邮 箱 表单 控 
件 自动 完成 ， 密 码 表 单 控件 不 提示 自动 完成 时 使 用 。 使 用 Chrome 浏 览 器 打开 网 页 文件 ， 单 击 


电子 邮箱 输入 框 ， 如 图 5.21 所 示 。 


示例 006 搞定 表单 的 自动 完成 
EE 
11@gmalcom 
1@gmallcom i 
2@omai com 


图 5.21 表单 自动 完成 下 拉 提 示 


如 果 读 者 的 Chrome 浏 览 器 不 支持 该 属性 ， 请 单 击 Chrome 浏 览 器 菜单 ， 选 择 设置 ， 单 击 “ 显 
示 高 级 设置 ”选项 ， 然 后 找到 “密码 和 表单 ”字段 ， 选 中 “启用 自动 填充 功能 后 ， 只 需 单 击 
一 次 即 可 填写 多 个 网 络 表单 ” 复 选 框 。 


局 
本 | 
习 


5.6.2 代码 设计 
利用 编辑 器 编辑 如 下 代码 ， 并 保存 为 “006 .搞定 表单 的 自动 完成 html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="utf-8"> 

05 <title> 示 例 006 搞定 表单 的 自动 完成 </title> 

06 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 

07 <style type="text/css"> 

08 body{ 

09 margin:50px auto;width:430px;padding:20px;border:1lpx solid 
#c88e8es; 

10 border-radius: 15px; <!-- 设置 圆 角 --> 

11 } 

和 全 </style> 

13 </head> 

14 <body> 

15 <!-- 引用 bootstrap 的 块 样式 --> 
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16 <blockquote> 

i <p> 示 例 006 搞定 表单 的 自动 完成 </p> 

18 </blockquote><!-- // 块 结束 --> 

19 <!-- 登录 表单 --> 

20 <form action="autocomplete.php" method="get" 

21 autocomplete="off"><!-- 表单 启用 自动 完成 属性 (全 局 设置 ) --> 

22 <!-- 手动 启用 电子 邮箱 表单 控件 的 自动 完成 功能 --> 

23 <input type="email" name="email" id="email" value="" 

24 autocomplete="on™ placeholder=" 电 子 邮 箱 地 址 " /> 

2 <!-- 手动 关闭 密码 表单 控件 的 自动 完成 功能 --> 

26 <input type="password" id="password" name="password" 
autocomplete="off" placeholder=" 密 码 ” /> 

27 <br /> 

28 <input type="submit" class="btn" value=" 登 录 "/> 

29 </form> 

30 <!-- // 登录 表单 结束 --> 

31 </body> 


32 </html> 


5.6.3 代码 分 析 


HTML 5 表单 新 增 autocomplet 属 性 。 该 属性 适用 于 form 标 签 ， 以 及 input 标 签 类 型 ， 如 


text、search、url、telphone、email、password、datepickers、range 及 color。 其 中 


h， 定 于 form 上 


的 autocomplete 属 性 影响 其 子 元 素 的 input 属 性 。autocomplete 属 性 的 默认 值 为 on， 表 示 开 启 。 


第 20 行 设置 该 登录 表单 的 autocomplete 全 局 属性 为 关闭 状态 。 
第 23 行 打开 “电子 邮箱 ”表单 控件 的 自动 完成 功能 。 


| 担 。 浏 览 器 会 记 住 “电子 邮箱 ”表单 的 输入 历史 ， 当 重新 剧 新 该 表单 页 面 ， 单 击 
RT ( 吉 者 单 击 上 下 键 )， 会 自动 提示 匹配 的 历史 输入 数据 。 


输入 框 输入 数据 


第 26 行 设置 autocomplete 属 性 值 为 off， 关 闭 “ 密 码 ” 表 单 控件 的 自动 完成 功能 。 


5.7 示例 7 使 用 数字 微调 控件 


5.7.1 示例 效果 


这 是 一 个 非常 有 趣 的 示例 ， 整 个 页 面 就 1 个 “年 龄 ”数字 文本 输入 框 。 可 以 通过 话 简 或 键 
盘 的 方式 进行 输入 ， 也 可 以 通过 单 击 文本 框 右 侧 的 向 上 或 向 下 箭头 进行 数字 增 减 〈 每 次 增 减 
1) 。 输 入 完毕 以 后 ， 程 序 会 根据 输入 的 结果 返回 对 应 的 出 生年 和 生肖 显示 在 文本 框 下 方 。 
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HV. smmermn IE 


查 _ 
屋 本 示例 没有 使 用 任何 第 三 方 类 库 ， 代 码 在 Chrome 下 测试 通过 ， 建 议 使 用 Chrome 打 开 。 


使 用 Chrome 打 开 网 页 文件 ， 运 行 效果 如 图 5.22 所 示 。 
在 “年 龄 ” 右 侧 文 本 框 中 输入 “28”， 下 方 会 自动 显示 出 生 和 生肖 提示 ， 运 行 效果 如 图 
5.23 所 示 。 


5 | 年 的 : 


图 5.22 使 用 Chrome 打 开 网 页 文件 图 5.23 文本 框 中 输入 “28” 


单 击 文本 框 右 侧 的 向 上 箭头 ， 文 本 框 内 数字 加 1， 变 为 “29”， 同 时 下 方 提示 信息 发 生 
相应 的 变化 ， 运 行 效果 如 图 5.24 所 示 。 单 击 文本 框 右 侧 的 向 下 箭头 ， 文 本 框 内 数字 减 1， 还 原 
为 “28”， 同 时 下 方 的 提示 信息 也 发 生 相 应 的 变化 。 接 下 来 单 击 文本 框 右 侧 话 简 形状 图 标 ， 
运行 效果 如 图 5.25 所 示 。 


和 四 +R 


图 5.24 单 击 向 上 箭 图 5.25 单 击 话 简 形状 图 标 


如 图 5.25 所 示 ， 出 现 一 个 带 有 “请 开始 说 话 ”的 提示 框 ， 可 以 对 着 话 简 说 出 数字 。 浏 览 
器 语音 识别 成 功 以 后 会 自动 填 入 文本 框 ， 如 果 识 别 失败 则 提示 “无 法 识别 语音 ”， 运 行 效果 
如 图 5.26 所 示 。 清 空 文本 框 内 容 ， 然 后 输入 非 数 字 型 字符 ， 如 “a”， 此 时 下 方 会 给 出 错误 提 
示 ， 运 行 效果 如 图 5.27 所 示 。 


年 龄 ， 4 主 


无 法 识别 语音 。 
毒 这 风 设 置 


x | mA | 


图 5.26 浏览 器 语音 识别 失败 


以 上 就 是 整个 示例 的 所 有 效果 ， 下 面 进一步 分 析 示 例 上 


图 5.27 输入 非 数 字 字 符 


发 方 


面 的 相关 知识 。 


5.7.2 代码 设计 
利用 编辑 器 打开 “007. 使 用 数字 微调 控件 .html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 


Ph 运用 了 哪些 HTML 5 新 特性 和 


02 <html> 

03 <head> 

04 <style> 

05 html { text-align:center; } /* 所 有 文本 居中 */ 
06 #spinner { width: 200px; } 

07 section 

08 { 

09 margin:0 auto; 

10 width:300px; 

了 padding:15px; 

下 之 background-color:#eee; 

1 1 border-color: #eee; 

14 border-radius: 3px; /* 圆 角 ， 水 平 半径 为 3px */ 
ey -moz-border-radius: 3px; 

16 -Webkit-border-radius: 3px; 

jr } 

16 .name-tip /* 提示 框 样式 */ 
1 下 

20 background-color:#D5982D; 

ht width:300px; 

22 height:200px; 

| line-height:200px; 

24 margin-top:10px; 

2 border-width: lpx; 

26 border-style: solid; 

27 border-color: #D69E31 #E3A037 #D5982D #E3A037; 

28 -moz-border-radius: 3px; /* 圆 角 ， 水 平 半径 为 3px */ 
pp -Webkit-border-radius: 3px; 
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30 border-radius: 3px; 
zh 此 
32 </style> 
33 </head> 
34 <body> 
35 <header><h2> 使 用 数字 微调 控件 </h2></header> 
36 <section> 
37 <div> 
38 <label for="spinner"> 年 龄 : </label> 
39 <span class="age"> 
40 <!-- speech x-Webkit-speech 表示 人 允许 用 语音 输入 --> 
41 <input id="spinner" name="spinner" type="number" 
42 min="1" max="100" step="1" required speech x-Webkit-speech /> 
43 </span> 
44 </div> 
45 <!-- 提示 容器 --> 
46 <div class="name-tip" id="J name tip"></div> 
47 </section> 
48 </body> 
49 <script> 
50 var spinner = document .getElementById('spinner’'), 
// 获取 数值 文本 框 元 素 
5 name tip = document.getElementById('J name tip'), 
// 获取 提示 文本 框 容器 
52 arr = [' 猴 '，' 鸡 '，' 狗 '，! 猪 "，' 鼠 '，' 牛 '，' 席 '，' 免 '，! 龙 '，' 蛇 '， 
' 马 '，'!' 羊 ']; // 生肖 数组 
EE 
54 function getTip() { 
55 var number = parseInt (spinner.value), 
// 转换 为 整 型 
56 Year = (new Date() .getFullYear() - number), 
// 获取 出 生年 
mh msg; 
58 
59 if (!spinner.validity.valid) { 
// 判断 是 否 为 数字 类 型 
60 // 填充 错误 信息 ， 并 添加 “清空 ”功能 
61 msg = ' 您 输入 有 误 ， 请 <a href="javascript:spinner.value=\'\'"> 
清空 </a> 后 重新 输入 。' 7 
62 } else { 
63 // 用 正则 表达 式 判 断 是 否 为 4 位 数字 ， 如 果 是 则 取 数 组 索引 是 12 的 模 
64 msg = ' 您 出 生 于 : ' + year + '; 属 : ' + (/^\d{4}$/.test (year) 
2 arr[year % 12] : ' 未 知 ') + '。'; 
65 ] 
66 name tip.innerHTML = msg7 
// 填充 提示 容器 HTML 信 息 
67 人 
68 spinner.addEventListener('input', getTip, false); 
// 数值 文本 框 input 事 件 
69 spinner.addEventListener('speechchange', getTip, false); 


// 数值 文本 框 speechchange 事 件 
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70 </script> 
71 </html> 


机 _ 
| 国 


本 示例 代码 在 Chrome 下 测试 通过 ， 请 选用 Chrome 打 开 示 例 浏览 。 


5.7.3 代码 分 析 


代码 第 5 行 ~ 第 31 行 设置 了 文本 框 和 提示 框 的 样式 ， 其 中 用 到 了 CSS 3 的 border-radius( 示 


例 0039 


已 经 有 非常 多 的 讲解 ， 这 里 不 多 加 发 述 ) 。 


代码 第 41 行 ~ 第 42 行 ， 上 面 集合 了 多 个 HTML 5 input 新 属性 ， 有 min、max、step、 
required、speech (x-Webkit-speech) ， 代 码 如 下 : 


<input id="spinner" name="spinner" type="number" min="1"” max="100" 
step="1" required speech x-webkit-speech /> 


其 中 HTML 5 相关 新 属性 的 说 明 如 下 。 


[ 国 


min: 输入 数字 的 最 小 值 。 

max: 输入 数字 的 最 大 值 。 

step: 输入 数字 的 合法 数字 间隔 。 
required: 输入 字段 的 值 是 必需 的 。 
speech: 打开 语音 输入 功能 。 


X-Webkit-speech 是 WebKit 核 心 的 浏览 器 的 私有 属性 ， 比 较 常 见 的 WebKit 核 心 浏览 器 有 
Chrome、 国 内 双核 浏览 器 最 新 版 〔 如 傲游 、360 等 ) 。 如 果 想 了 解 更 多 的 W3C 语 音 输 入 API 
规范 可 以 参考 网 站 http://www.w3.org/2005/Incubator/htmlspeech/。 


代码 第 50 行 ~ 第 69 行 是 主要 的 脚本 代码 ， 接 着 看 看 这 些 代 码 到 底 做 了 些 什么 。 


第 
三 个 变 


50 行 ~ 第 52 行 定义 了 三 个 变量 ， 前 两 个 变量 获取 DOM 中 数字 文本 框 和 提示 框 元 素 ， 第 
量 定义 了 一 个 生肖 数组 用 于 后 面 的 信息 提示 。 


第 54 行 ~ 第 67 行 定义 了 一 个 函数 ， 用 于 数值 文本 框 的 事件 绑 定 。 第 59 行 运用 了 HTML 5 


表单 的 
如 下 。 


一 个 新 对 象 ValidityState， 即 spinnervalidity 获 取 的 对 象 值 ， 该 对 象 拥有 8 个 属性 ， 说 明 


valueMissing: 布尔 型 ， 必 填 表 单元 素 的 值 为 空 时 为 tue， 否 则 为 false。 
typeMismatch: 布尔 型 ， 输 入 值 与 type 类 型 不 匹配 时 为 tue， 否 则 为 false。 
patternMismatch: 布尔 型 ， 输入 值 与 pattern 属 性 正则 不 匹配 时 为 tue， 否 则 为 false。 
tooLong: 布尔 型 ， 输 入 内 容 超出 元 素 maxLength 属 性 数值 时 为 true， 否则 为 false。 
IangeUnderflow: 布尔 型 ， 输入 值 小 于 min 属 性 数值 时 为 tue， 否 则 为 false。 
rangeOverflow: 布尔 型 ， 输入 值 大 于 max 属 性 数值 时 为 tue， 否 则 为 false。 
stepMismatch: 布尔 型 ， 输 入 值 不 匹配 step 特 性 规则 时 为 tue， 否 则 为 false。 
customError: 布尔 型 ， 是 用 户 自 定义 错误 信息 时 为 tue， 否 则 为 false。 


第 64 行 代码 当 输 入 符合 要 求 时 触发 ， 同 时 通过 正则 和 模 运算 获取 年 对 应 的 生肖 数值 ， 关 
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键 逻辑 代码 如 下 : 

/^\d{4}$/.test (year) ? arr[year % 12] : ' 未 知 ' 

第 68 行 ~ 第 69 行 代码 绑 定 文本 框 的 mput 和 speechchange 事 件 ， 分 别 在 用 户 输入 结束 和 语音 
输入 结束 时 触发 ， 代 码 如 下 : 


spinner.addEventListener('input', getTip, false); 
spinner.addEventListener('speechchange', getTip, false); 


addEventListener 方 法 共有 三 个 参数 ， 分 别 表 示 事 件 名称 、 事 件 函 数 名 、 是 否 使 用 捕获 。 
HTML 5 事件 类 型 远 远 不 止 示例 中 的 这 些 ， 想 了 解 更 多 HTML 5 事件 属性 请 参考 网 站 
http://www.w3school.com.cn/html$/html$ ref eventattributes.asp。 


5.7.4 相关 知识 


1. 正则 表达 式 

正则 表达 式 的 英文 名 为 Regular Expression， 是 计算 机 科学 的 一 个 概念 。 正 则 表达 式 使 
单个 字符 串 来 描述 、 匹 配 一 系列 符合 某 个 句法 规则 的 字符 串 。JavaScript 的 正则 表达 式 有 两 种 
写法 ， 如 下 : 


/pattern/attributes // 直接 量 语法 
new RegExp(pattern, attributes); // 创建 RegExp 对 象 的 语法 


IE 想 了 解 更 多 的 JavaScript 正 则 表达 式 请 前 往 http://www.w3school.com.cny/js/jsref obj_Tregexp. 
asp。 


2. DOM 事 件 流 


DOM 事 件 流 分 为 两 种 : 捕获 型 和 冒 泡 型 。 捕 获 型 事件 只 在 非 下 浏览 器 下 得 到 支持 ， 不 过 
冒 泡 型 事件 在 所 有 浏览 器 下 都 得 到 了 支持 。 在 刚刚 的 示例 中 用 到 了 冒 泡 型 事件 ， 给 一 张 图 看 
看 冒 泡 型 事件 是 怎么 工作 的 ， 如 图 5.28 所 示 。 图 片 清 楚 地 说 明了 冒 泡 型 事件 是 一 个 由 内 到 外 
的 过 程 。 事 件 从 目标 元 素 开始 ， 通 过 各 个 父 节点 穿 过 整个 DOM。 接 着 通过 图 示 看 看 捕获 型 事 
件 流 的 过 程 ， 如 图 5.29 所 示 。 捕 获 型 事件 是 一 个 由 外 到 内 的 过 程 ， 从 DOM 的 根 元 素 开始 ， 依 
次 由 父 元 素 逐 级 向 下 到 达 目标 元 素 。 


图 5.28 冒 泡 型 事件 流 图 5.29 捕获 型 事件 流 
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了 解 更 多 知识 可 以 参考 网 站 http://www.quirksmode.org/js/events_order.html。 


5.8 示例 8 添加 滑动 控件 


示例 效果 


通常 一 个 带 有 抽奖 性 质 的 后 合 活动 管理 系统 ， 都 可 以 灵活 地 设置 中 奖 概率 。 本 示例 演示 


了 一 个 通过 HTML 5 的 滑动 控件 控制 转盘 抽奖 系统 的 


动 设置 


| 区 


使 


5.8.2 


设置 转盘 抽奖 中 奖 概率 


一 等 这 


Opera 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 


示例 008 添加 滑动 控件 


37% 


h 奖 百分比 的 示例 。 可 以 通过 滑动 条 滑 
h 奖 概率 ， 滑 动 条 滑动 时 ， 右 侧 将 显示 当前 数值 。 


代码 在 Chrome、Safari、Opera 下 测试 通过 ， 建 议 使 用 Opera 打 开 。 


5.30 所 示 。 


图 5.30 设置 中 奖 概率 


代码 设计 


利用 


01 


<1DOCTYPE html> 


编辑 器 打开 “008 添加 滑动 控件 html” 文 件 ， 代 码 如 下 : 
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02 <html lang="en"> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 示 例 008 添加 滑动 控件 </title> 

06 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 

07 <script src="jquery-1.8.3.js"></script> 

08 <style type="text/css"> 

09 body{ 

10 margin:50px auto;width:430px;padding:20px;border:1lpx solid 
#c88e8e; 

1s border-radius: 15px; <!-- 设置 圆 角 --> 

12 外 | 

3 .Control-group{border-bottom:lpx dashed #ccc;padding: Spx 0;} 

14 </style> 

15 </head> 

16 <body> 

7 <!-- 引用 bootstrap 的 块 样式 --> 

18 <blockquote> 

19 <h3> 示 例 008 添加 滑动 控件 </h3> 

20 </blockquote> <!-- 块 结束 --> 

5 <!-- 中 奖 概率 设置 --> 

22 <h4> 设 置 转盘 抽奖 中 奖 概率 </h4> 

23 <br> 

24 <form action="#" method="get" autocomplete="on"> 

和 25 <div class="control-group"> 

26 <label for="one"> 一 等 奖 </label> 

27 <!-- 中 奖 概率 设置 滑动 控件 --> 

28 <input type="range" class="range" name="one" 
id="one" min="0" max="100" step="1" /> 

29 <!-- 显示 控件 --> 

30 <output onforminput="value=one.value + '%'">50% 
</output> 

31 </div> 

32 <div class="control-group"> 

33 <label for="two"> 二 等 奖 </label> 

34 <input type="range" class="range" name="two" 
id="two" min="0" max="100" step="]1" /> 

人 <output onforminput="value=two.value + 
'%'">50%</output> 

36 </div> 

BS <!-- ..。 其 他 奖项 表单 控件 同上 .. .--> 

38 <input type="submit" class="btn" value=" 提 交 "/> 

39 </form> 

<!-- // 表单 结束 --> 

40 </body> 

41 <script> 

42 $ (function(){ 

43 Var ranges = $(".range"), i; 

44 for(i = 0, max = ranges.length; i < max; i += 1){ 

45 Var that = $(ranges[i]); 

46 Var bind = (function(t){ 
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// 把 变量 放 到 闭 包 里 

47 Var output = t.next('output'); 
// 获取 显示 控件 

48 Var showValue = function(v) 1{ 
// 降级 处 理 ， 显 示 值 

49 output.text(v + '%'); 

50 } 

51 t.bind("change", function(){ 
// 绑 定 滑动 控件 的 change 事 件 

本 之 val = 七 -val() 7 

53 showValue (val); 

54 1); 

55 } (that)); 

56 } 

57 1); 

58 </script> 

59 </html> 

5.8.3 代码 分 析 


第 28 行 、 第 34 行 设置 中 奖 概率 滑动 控件 的 类 型 和 属性 。 类 型 为 range 表 示 该 控件 是 一 个 滑 


动 控件 ， 滑 动 控件 有 三 种 属性 。 


。 min: 滑动 的 最 小 值 ， 当 滑动 操作 滑 到 最 左边 时 ， 控 件 值 最 小 ， 在 本 例 中 为 0。 

。 max: 滑动 的 最 大 值 ， 当 滑动 操作 滑 到 最 右边 时 ， 控 件 值 最 大 ， 在 本 例 中 为 100。 

。 step: 滑动 增 量 ， 滑 动 操作 的 增 量 值 ， 在 本 例 中 为 1， 表示 滑动 值 处 理 0~100 间 的 自然 
数 ， 不 会 出 现 0.1、1.1 这 样 的 数值 。 


第 30 行 、 第 35 行 设置 滑动 值 显示 控 


件 ， 当 滑动 操作 发 生 时 ， 当 前 值 会 显示 在 该 控件 下 。 


查 _ 
| 里 未 只 有 Opera 浏 览 器 支持 output 与 range 相 关联 。 


代码 第 42 行 ~ 第 56 行 处 理 非 Opera 浏 
第 43 行 ， 获 取 所 有 滑动 控件 。 
第 44 行 ， 循 环 所 有 滑动 控件 。 
第 46 行 ， 用 闭 包 保护 变量 ， 存 储 当 
第 48 行 ， 当 前 滑动 值 显示 函数 。 


二 


览 器 显示 控件 值 的 降级 。 


前 的 滑动 控件 及 值 显示 控件 。 


第 51 行 ， 绑 定 滑动 控件 的 change 事 件 ， 如 果 控 件 当前 值 改 动 ， 则 更 新 显示 控件 的 值 。 


5.8.4 相关 知识 


output 控 件 
在 Web 站 点 上 会 经 常 看 到 一 些 用 了 


〈 比 如 计算 器 网 站 ) 。output 元 素 上 


计算 贷款 利率 、 税 收 、 保 险 以 及 更 多 事情 的 控件 等 


来 标记 这 些 计算 的 结果 ， 如 以 下 表单 代码 所 示 : 
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<form onsubmit="return false" oninput="o.value = parseInt (a.value) 
+ parseInt (b.value)"> 
<input name="a" type="number" step="any"> + 
<input name="b" type="number" step="any"> = 


<output name="o"></output> 
</form> 


提 _ 
| 轰 ™ 


想 要 了 解 更 多 关于 output 标 记 的 值 ， 请 参考 网 站 http://html5doctor.cony/the-output-element/。 


5.9 示例 9 发 送 多 个 文件 


5.9.1 示例 效果 


在 传统 的 文件 上 传 中 ， 每 次 只 允许 上 传 一 个 文件 。HTML 5 新 规范 在 input 上 添加 了 多 文 
件 上 传 属性 ， 每 次 允许 上 传 多 个 不 同文 件 。 本 示例 分 别 给 


出 了 客户 端 和 服务 器 端的 实现 代 
码 。 通 过 本 示例 ， 可 以 学 习 使 用 input 的 新 属性 multiple， 同 时 了 解 服务 器 端的 存储 。 


5.31 所 示 。 


使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 


图 5.31 使 用 Chrome 打 开 网 页 文件 


两 部 分 组 成 :表单 和 上 传 文件 列表 。 表 单 中 包含 了 两 个 input， 类 型 分 别 为 fle 和 
submit。 单 击 “ 选 择 文件 ”按钮 ， 选 中 “图 片 库 ” 文 件 夹 中 的 多 个 文件 ， 如 图 5.32 所 示 。 
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文人 Ni| 全 jpg” 企 耻 jp9” -天 全 再 jpg 本 | [所 及 人 习 


Le] ww | 


4 


图 5.32 选择 多 个 上 传 文件 


JR 
你 


中 


二 “打开 ”按钮 ， 选 中 的 文件 信息 显示 在 下 方 列 表 中 ， 如 图 5.33 所 示 。 


文件 名 


Chrysanthemun. jpg inage/ jpeg 


Desert jpe inage/jpe€ 


Hydrangeas. jpE image/ jpe€ 


Jellyfish jpg image/jpeg 


Kosala jpé image/ jpeg 


Lighthouse. jpg image/jpeg 


Penguins. jpe image/jpeg 


Tulips, jp image/ jpeé 


图 5.33 文件 信息 显示 列表 


文件 信息 列表 中 列 出 了 “文件 名 ”、“ 类 型 ”和 “大 小 ”三 项 数据 。 在 单 击 “ 提 交 ” 按 
钮 之 前 先 启 动 Node.js 上 传 服务 器 。 进 入 “009.upload-server” 文 件 夹 ， 如 图 5.34 所 示 。 


和 名称“ | 类 型 | 
时 node_modules 文件 赤 

转 package. json ”JSON 文件 

图 :erver js JSeript Seript 文件 


图 5.34 “009.upload-server” 文 件 夹 内 容 


server.js 存 放 了 主要 的 上 传 服务 逻辑 脚本 ，package.json 存 放 了 模块 的 描述 信息 ， 
node_modules 文 件 夹 存放 程序 依赖 模块 。 在 Windows 下 打开 命令 行进 入 刚才 的 目录 ， 执 
行 如 下 代码 : 
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no 


de server.js 


如 果 启 动 成 功 ， 命 令 行 提示 如 下 : 
listening on http://localhost:8080 
回 到 如 图 5.33 所 示 的 状态 ， 单 击 “提交 ”按钮 ， 进 行文 件 上 传 。 上 传 成 功 后 会 提示 


“上 传 成 功 ， 文 件 已 经 保存 到 服务 器 ， 远 程 路 径 : xxx”。 同 时 命令 行 会 显示 相应 上 传 的 文 
件 名 称 ， 如 图 5.35 所 示 。 


返 


网 


5.35 文件 上 传 成 功 提示 


至 此 整个 上 传 过 程 结束 。 快 来 亲 


如 果 服 务 器 在 本 机 启动 ， 这 里 的 “路 径 : XXX” 就 是 对 应 的 计算 机 临时 文件 夹 路 径 ， 如 “C:\ 
Users\(loginName) \AppData\Local\Temp”。 


5.9.2 代码 设计 


利 


01 
02 
03 
04 
05 
06 
07 


<!ldoctype html> 
<html> 
<head> 

<style> 


F 体 验 一 下 多 文件 上 传 的 魅力 吧 ! 


编辑 器 打开 “009. 发 送 多 个 文件 .html” 文 件 ， 代 码 如 下 : 


/* 示例 样式 ， 具 体 查看 源 代码 文件 */ 


</style> 
</head> 
<body> 


<header><h2> 发 送 多 个 文件 </h2></header> 


<section> 


<!-- 表单 编码 类 型 为 “multipart/form-data”，post 到 本 机 服务 器 


8080 端 口 --> 


<form method="post" enctype="multipart/form-data" 
action="http://localhost:8080" > 
<!-- 多 文件 上 传 控件 ， 增 加 了 multiple 属 性 --> 


<input 
multiple /> 
<input 
</form> 
<!-- 文件 显 
<table id= 
</section> 


type="file" name="multi-file" id="multi-file" 
type="submit" value=" 提 交 " /> 


不 列 农 > 


"file-1ist"><tr><td> 空 </td></tr></table> 
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20 
21 
22 


| 
24 
4 
26 
2 
28 


29 
30 


3 
32 
| 


34 
35 
36 


利 


01 
02 
03 


04 
05 
06 
07 


08 
09 


10 
1 
2 
L3 


14 
15 
16 


</body> 
<script> 
Var multi file = document.getElementById('multi-file'), 
// 获取 上 传 控 件 
file list = document.getElementById ("file-list'), 
// 获取 列表 控件 
slice = Array.prototype.slice; 
// 获取 数组 slice 原 型 方法 
multi file.addEventListener('change', function (e) { 
// 监听 上 传 控件 数据 变化 
var files = slice.call (multi file.files, 0), 
// 将 FileList 对 象 转 为 数组 
htmls = ['<tr><th> 文 件 名 </th><th> 类 型 </th><th> 大 小 
</th></tr>']; // 列表 标题 
files.forEach (function (file, index) { 
// 循环 file 数 组 
// 组 装 File 对 象 的 name、type、size 属 性 为 html 
htmls.push('<tr><td>' + file.name + '</td><td>' 


+ file.type + '</td><td>"' + file.size + 

We /E> Ee 
1); 
file list.innerHTML = htmls.join(''); 
// 重 设 列表 html 

}, false); 
</script> 
</html> 


编辑 器 打开 “009.upload-server” 文 件 夹 中 的 server.js 文 件 ， 代 码 如 下 : 


Var formidable = require("formidable"), 


// 引用 formidable 模 块 ， 用 于 文件 保存 


fs = require('fs'), 
// 引用 fs 模块 ， 用 于 对 文件 进行 操作 
http = require("http"); 
// 引用 http 模 块 ， 用 于 web 服 务 器 
http .createServer (function (req, res) { // 创建 新 服务 器 
var form = new formidable.IncomingForm()，// 新 建 form 实 例 
files = []; 
// 新 建 fles 数 组 ， 用 于 存储 上 传 文件 实例 
form.on('end', function () { 
// 监听 form 上 传 结束 事件 
// 设置 响应 头 MTIME 类 型 和 编码 
res.setHeader ('content-type', 'text/htm1l;charset=utf-87 71) 7 
// 写 入 上 传 成 功 信息 
res.write ("上传 成 功 ,文件 已 经 保存 到 服务 器 ， 远 程 路 径 : ， + 


form.uploadDir); 
// 响应 结束 
res.end(); 
}) .on('file', function (field, file) { 
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// 监听 form 文 件 上 传 事件 


了 files.push (file) > 
// 将 上 传 文件 的 fle 实 例 存 入 数组 
6 }) .on ('erIor'!y function (error) { 
// 监听 form 上 传 出 错 事 件 
19 res.setHeader('content-type', 'text/html;charset=utf-8;'); 
20 res.write(' 上 传 失败 ,，' + error); 
2 res.end(); 
22 i 
| form.pParse (eq function (err) { 
// 调用 parse 接 口 解析 请 求 信息 并 保存 文件 
24 files.forEach (function (item, index) { 
// 循环 上 传 的 文件 数组 
25 console.log(item.name); 
// 在 控制 台 显示 文件 名 
26 // 将 上 传 至 服务 器 端的 文件 名 重 命名 为 原文 件 名 
27 fs .rename (item.path, form.uploadDir + '\\' + item.namey 
function (err) { }); 
28 Ds; 
29 ]) 7 


30 }).listen(8080, function () { 
// 设置 web 服务 器 监听 端口 ， 并 启动 服务 
3 // 控制 台 显示 web 服 务 器 启动 成 功 
32 console.log('listening on http://localhost:8080'); 
33 1); 


5.9.3 代码 分 析 


1， 客户 端 网 页 代码 分 析 


代码 第 12 行 中 form 表 单 的 enctype 属 性 值 为 “multipart/form-data”， 表 示 传 输 不 对 字符 编 
码 ， 进 行 二 进 制 传输 ， 当 表单 有 上 传 控件 时 ， 需 要 加 上 这 个 参数 。action 地 址 设置 为 本 机 的 
8080 端 口 ， 指 向 上 传 服务 器 。method 为 post， 表 示 表 单 以 post 方 式 传输 。 

代码 第 14 行 为 上 传 控件 ， 添 加 input 元 素 为 HTML 5 新 属性 multiple， 表 示 同 时 可 以 添加 多 
文件 上 传 。 

代码 第 24 行 获取 了 Array 原 型 上 的 slice 方 法 。slice 方 法 返回 一 个 新 数组 ， 包 含 从 原 数组 中 
选 定 的 元 素 ，slice 语 法 如 下 : 


arrayObject.slice(start,end) 

第 25 行 ~ 第 34 行 在 上 传 控件 上 监听 change 事 件 ， 当 控件 数值 变化 时 触发 。 

第 26 行 代码 ，multi_file files 获 取 到 一 个 FileList 对 象 。 该 对 象 拥有 一 个 只 读 的 length 属 性 表示 
列表 长 度 。 同 时 对 象 上 拥有 item 方 法 ， 通 过 该 方法 获取 对 应 索引 的 数据 ，item 方 法 语法 如 下 : 


filelistObject.item(index) 


这 里 将 FileList 对 象 通过 slice 方 法 转化 为 数组 ， 从 而 获取 数组 的 forEach 方 法 。 
代码 第 28 行 ~ 第 32 行 循环 获取 文件 列表 中 的 File 对 象 ， 将 对 象 上 的 name (文件 名 ) 、type 
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(文件 类 型 》、size (文件 大 小 ) 属性 拼接 为 字符 串 填 入 htmls 数 组 。 

代码 第 33 行 调用 数组 join 方法 将 htmls 数 组 放 入 一 个 字符 串 ， 然 后 填充 到 文件 列表 元 素 
中 ， 至 此 核心 的 客户 端 代码 业务 逻辑 完毕 。 

2. 服务 器 端 代码 分 析 

通过 第 4 章 的 学 习 ， 已 经 了 解 到 Node:js 基 本 的 使 用 方法 ， 本 示例 运用 Nodejs 拱 建 一 个 上 
传 服务 器 。 下 面 来 看 看 服务 器 端 是 如 何 实现 的 。 

代码 第 1 行 ~ 第 3 行 引用 了 本 次 需要 使 用 的 三 个 模块 。 

。 formidable: 解析 表单 传送 数据 ， 用 于 处 理 文件 上 传 。 


。 全: 文件 系统 模块 ， 用 于 处 理 文件 重 命名 、 读 取 、 写 入 等 。 
。 http: HTTP 模 块 ， 用 于 处 理发 送 请 求 、 接 受 请 求 等 。 


IE formidable 模 块 的 更 多 使 用 方法 可 以 参考 https://github.cony/felixge/node-formidable， 人 和 http 的 
< 使 用 可 以 参考 http://docs.cnodejs.net/cman/index.html。 


代码 第 5 行 ， 调 用 http 的 createServer 方 法 创建 一 个 HTTP 服 务 器 ， 同 时 传 入 一 个 函数 。 当 
有 请 求 时 会 触发 传 入 函数 ， 函 数 获得 请 求 对 象 和 响应 对 象 ( 即 代码 中 的 req 和 res 参数 ) 。 

代码 第 6 行 新 建 了 一 个 formidable 模 块 的 IncomingForm 类 实例 ， 该 类 是 对 提交 表单 的 抽象 。 

第 9、16、18 行 代码 分 别 监 听 了 IncomingForm 实 例 的 end、file 和 error 事 件 。 

代码 第 11 行 和 第 19 行 设置 了 响应 头 信息 ， 将 “content-type” 设 置 为 “text/ 
html;charset=utf-8”， 表 示 响 应 信息 为 互联 网 媒体 类 型 ， 编 码 格式 为 UTF-8。 


查 _ 
| 匡 二 text/html 类 型 更 多 信息 可 以 参考 http://tools.ietf.org/htmlrfc2854。 


代码 第 13 行 往 响 应 数据 流 中 写 入 提示 信息 ， 接 着 在 代码 第 15 行 调用 end 方 法 ， 表 示 所 有 数 
据 都 已 经 被 发 送 ， 响 应 可 以 结束 〈 代 码 第 20 和 21 行 与 此 相同 ) 。 

代码 第 17 行 监听 提交 表单 的 上 传 事件 ， 获 得 的 文件 对 象 推 入 临时 创建 的 数组 ， 在 代码 第 
24 行 会 对 该 数组 进行 循环 操作 。 

代码 第 27 行 接收 循环 文件 数组 并 获取 单个 文件 对 象 ， 调 用 代码 第 二 行 引 用 的 fs 模块 ( 文 
件 系统 模块 )， 通 过 fs 模块 的 rename 方 法 修改 对 应 上 传 至 服务 器 端的 文件 名 ， 代 码 如 下 : 


fs.rename (item.path, form.uploadDir + '\\' + item.name, function (err) { }); 


代码 第 30 行 启动 服务 并 监听 8080 端 口 ， 在 回调 函数 中 打印 启动 成 功 信息 。 


| 区 未 示例 多 处 使 用 Node.js 的 HTTP 模 块 ， 这 个 模块 在 Web 服 务 器 开发 中 至 关 重 要 ， 想 更 深入 地 了 
她 解 相 关 API 使 用 可 以 参考 http://nodejs.org/api/http.html#http_response_end_data_encoding。 


5.9.4 相关 知识 


MIME 编 码 
例子 中 多 次 出 现 “content-type”， 在 HTTP 当 中 MIME 类 型 被 定义 在 其 中 。MIME 类 型 是 
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多 用 途 互 联网 邮件 扩展 的 一 个 互联 网 标准 ， 英 文 名 为 Multipurpose Internet Mail Extensions。 最 
早 应 用 在 邮件 系统 当中 ， 后 来 应 用 到 浏览 器 中 。 常 见 的 类 型 有 text/html (HIML 文 档 ) 、text/ 
plain〔 纯 文本 ) 、image/gif (GIF 图 像 》、image/jpeg (JPEG 图 像 ) 等 。 更 多 信息 可 以 参考 
http:/www.w3school.com.cn/media/media_ mimerefasp 和 http://zh.wikipedia.org/wikVMIME 。 


5.10 示例 10 利用 正则 表达 式 创 建 
自 定义 输入 类 型 


5.10.1 示例 效果 


在 一 个 电子 商务 网 站 中 ， 通 常 需要 维护 用 户 的 个 人 基本 信息 ， 如 了 昵称、 身份 证 号 码 
等 。 本 示例 演示 了 在 电子 商务 网 站 个 人 中 心 的 基本 信息 设置 页 面 ， 设 置 个 人 基本 信息 的 表 
单 。 当 用 户 单 击 “ 提 交 ” 按 钮 时 ， 了 昵称 和 身份 证 号 必须 匹配 表单 控件 的 正则 表达 式 ， 否 则 
给 出 提醒 。 


棍 _ 
| 国共 。 代码 在 Chrome 下 测试 通过 ， 建 议 使 用 Chrome 打 开 。 


使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 5.36 所 示 。 


示例 010 利用 正则 表达 式 创建 自 定义 输入 类 型 
在 电子 商务 网 站 中 设置 个 人 基本 信息 
PPE spricity 


会 吴 关 型。 个 人 用 户 um 
昵称 控件 


= 和 
电 涪 spricity@gmail.com 
了 号 186* 581 


~ 利用 下 内 达 上 创建 
与 人 ES 三 


图 5.36 利用 正则 表达 式 创 建 两 个 自 定义 类 型 
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5.10.2 代码 设计 


利 


01 
02 
03 
04 
05 
06 
07 
08 
09 


10 
了 
12 
13 
14 
15 
16 
7 
18 
了 过 
20 
21 
22 
之 本 
24 
25 
26 
交 济 
28 
2 
30 
3 
3 
| 


34 
35 
36 
33 
38 
39 
40 
41 
42 
43 
44 


编辑 器 打 


开 “010. 利 用 正则 表达 式 创建 自 定义 输入 类 型 .html” 文 件 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
<title> 示 例 010 利用 正则 表达 式 创建 自 定义 输入 类 型 </title> 


<style type="text/css"> 


body{ 


margin:50px auto;width:430px;padding:20px;border:1lpx solid 


#c88e8e; 


border-radius: 15px; /* 设置 圆 角 */ 


} 


span.msg{font-size: 1l0px;display: block;} /* 验证 提示 信息 */ 
.info{line-height: 30px; font-weight: bold;} /* 不 能 填 字 段 */ 
</style> 


</head> 
<body> 


<blockquote> 
<p> 示 例 010 利用 正则 表达 式 创建 自 定义 输入 类 型 </p> 
</blockquote><!-- 块 结束 --> 


5 


表单 开始 --> 


<h4> 在 电子 商务 网 站 中 设置 个 人 基本 信息 </h4> 


<br> 


<form class="form-horizontal" name="myform"> 
<div class="control-group"> <!-- 用 户 名 显示 区 --> 


<label class="control-label"> 用 户 名 </1label> 
<div class="controls info">spricity</div> 


</div> 
<div class="control-group"> <!-- 用 户 类 型 显示 区 --> 


<label class="control-label"> 会 员 类 型 </label> 
<div class="controls info"> 个 人 用 户 </div> 


</div> 
<div class="control-group"> 


<label class="control-label"” for="nickname"> 昵 称 </label> 


<!-- 昵称 填写 区 域 --> 


<div class="controls"> 
<!-- 自 定义 昵称 输入 类 型 --> 


<input type="text" id="nickname" required pattern="^[0- 


9A-Za-z\u4e00-\u9fa5 \-]+$" name="nickname"> 


<!-- 昵称 验证 类 型 提醒 --> 
<span class="msg"> 可 由 中 英文 、 数 字 、“ ”、“-” 组 成 </span> 


</div> 


</div> 
<div class="control-group"> <!-- 邮箱 填写 区 域 --> 


<label class="control-label"> 邮 箱 </label> 
<div class="controls info">spricity@gmail.com</div> 
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45 </div> 

46 <div class="control-group"> <!-- 手机 号 填写 区 域 --> 

47 <label class="control-label"> 手 机 号 </label> 

48 <div class="controls info">186****+*581</divV> 

49 </div> 

50 <div class="control-group"> <!-- 身份 证 号 填写 区 域 --> 

51 <label class="control-label"” for="cardno"> 身 份 证 号 </label> 

52 <div class="controls"> 

53 <!-- 自 定义 身份 证 号 输入 类 型 --> 

54 <input type="text" id="cardno" pattern="^(\d{15}$1|^ 
\d{18}$1^\d{17} (\dlXx|x))$" name="cardno"> 

55 </div> 

56 </div> 

3 <div class="control-group"> <!-- 表单 提交 按钮 区 --> 

58 <div class="controls"> 

59 <button type="submit" class="btn"> 提 交 </button> 

60 </div> 

61 </div> 

62 </form> <!-- 表单 结束 --> 

63 </body> 


64 </html> 代 码 分 析 


第 36 行 设置 昵称 控件 的 pattern 属 性 ， 设 置 其 属性 的 正则 表达 式 的 值 为 “^[0-9A-Za- 
zu4e00-vu9fa5_\v]+$”， 要 求 该 表单 控件 值 必须 满足 由 中 英文 、 数 字 、“_”、“-” 组 成 。 


本 章 第 4 个 例子 讲 到 的 patternMismatch 控 件 属性 ， 在 HTML 5 代码 上 ， 只 要 设置 pattern 为 正则 


| 展 表达 式 的 


第 54 行 ， 定 
(\d|X|x))$”， 该 了 


值 ， 就 可 以 使 用 表单 控件 的 pattermMismatch 属 性 。 


义 身份 证 号 控件 ， 设 置 其 pattern 值 为 “^(\d{15}$|^d{18}$I^\d{17} 
E 则 表达 式 满足 身份 证 15 位 数字 的 身份 证 号 ， 以 及 18 位 数字 或 者 17 位 数字 加 


一 位 字母 X 的 身份 证 号 码 。 


IE 如 果 要 自 


定义 其 他 类 型 的 表单 控件 ， 只 要 在 pattem 属 性 上 定义 相应 的 正则 表达 式 即 可 。 


5.11 示例 11 预览 上 传 的 图 片 


5.11.1 示例 效果 


在 示例 9 中 ， 


介绍 了 HTML 5 新 特性 multiple 和 上 传 服务 器 端的 存储 逻辑 脚本 。 本 示例 将 


在 原 有 的 基础 上 增加 上 传 类 型 判断 和 图 片 预览 功能 ， 增 强 表单 的 用 户 体验 ， 同 时 还 会 介绍 


HTML 5 在 文件 数 


据 读 取 方 面 的 操作 。 


238 


i 第 5 讲 “HTML 5 元 来 与 表单 大 演练 


使 有 


JR 
你 


Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 5.37 所 示 。 


图 5.37 使 用 Chrome 打 开 网 页 文件 


U 


“选择 文件 ”按钮 ， 选 择 “ 图 片 库 ”中 的 图 片 文件 和 两 个 非 图 片 文件 ， 如 图 5.38 所 示 。 


| 


图 5.38 选择 图 片 文件 和 两 个 非 图 片 文件 


单 击 “打开 ”按钮 ， 下 方 生 成 上 传 文件 列表 并 显示 图 片 预览 。 如 果 选 中 的 文件 为 图 片 类 
型 ， 则 在 预览 框 内 展现 缩 略图 片 ， 否 则 显示 为 空 ， 如 图 5.39 所 示 。 


图 5.39 上 传 文件 列表 和 图 片 预览 
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CIHTML se ee 


查 _ 
| 蕊 下。 后续 操作 与 示例 009 相 同 ， 这 里 不 过 多 介绍 。 


5.11.2 代码 设计 


利用 编辑 器 打开 “011. 预 览 上 传 的 图 片 .html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 


02 <html> 

03 <head> 

04 <style> 

05 /* 与 示例 009 基 本 相同 ， 略 ... */ 

06 </style> 

07 </head> 

08 <body> 

09 <header><h2> 预 览 上 传 的 图 片 </h2></header> 

10 <section> 

ns <!-- 表单 编码 类 型 为 “multipart/form-data”，post 到 本 机 服务 器 8080 端 口 --> 

2 <form method="post" enctype="multipart/form-data" 
action="http://localhost:8080" > 

13 <!-- 多 文件 上 传 控件 ， 增 加 了 multiple 属 性 --> 

14 <input type="file" name="multi-file" id="multi-file" multiple /> 

15 <input type="submit" value=" 提 交 " /> 

16 </form> 

17 <!-- 文件 显示 列表 --> 

18 <table id="file-1ist"><tI><td> 空 </td></tr></table> 

了 </section> 

20 </body> 


21 <script> 
22 (function () { 


23 var multi file = document .getElementById('multi-file')，// 获取 上 传 控件 
24 file list = document .getElementById('file-list'),// 获取 列表 控件 
25 slice = Array.prototype.slice; // 获取 数组 slice 原 型 方法 
26 Var GUID = 0; 
27 function guid() { return GUID++; }; // 全 球 唯一 标识 符 生成 函数 
28 multi file.addEventListener('change', function (e) { 
// 监听 上 传 控件 数据 变化 
这 3 var files = slice.call (multi file.files, 0), 
// 将 FileList 对 象 转 为 数组 获取 forEach 方 法 
30 htmls = ['<tr><th> 文 件 名 </th><th> 类 型 </th><th> 大 小 </th><th> 
预览 </th></tr>']; ”// 列表 标题 
二 
32 files.forEach (function (file，index) { // 循环 File 数 组 
33 var reader, // reader 变 量 用 于 存放 FileReader 实 例 
34 _guid = guid(); // 获取 全 球 唯一 标识 符 
35 // 组 装 File 对 象 的 name、type、size 属 性 为 html 
36 htmls.push('<tr><td>"' + file.name + '</td><td>' + file.type 
3 1 e/ad<td>r + fleeize tl Ve/td><tad Ld guid tt "C/AS</tr> 
38 if (file.type.toLowerCase() -match (/image-*/)) { 
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39 


// 用 正则 表达 式 判断 文件 是 否 为 图 片 类 型 
reader = new FileReader(); 
// 实例 化 FileReader 对 和 象 ， 用 于 读 取 文件 数据 
reader.addEventListener('load', function (e) { 


// 监听 FileReader 实 例 的 load 事 件 


// 获取 对 应 元 素 ， 并 填充 相应 图 片 
document .getElementById('J ' + _guid) .innerHTML = 
<img title="" + file.name + "”" alt="" 43 + Hlemame + 7 rc=" 
+ e.target.result + '"/>'; 
i 
reader .readAsDataURL (file); // 读 取 文件 为 DataURL 
]7 
Fs 
file list.innerHTML = htmls.join(''); // 重 设 列表 html 
J false)s 
Ts 
</script> 
</html> 


服务 器 端 脚 本 与 示例 9 相同 ， 本 示例 不 过 多 说 明 。 


5.11.3 代码 分 析 


代码 第 26 行 ， 定 义 全 局 唯一 标识 符 变 量 ， 用 于 保存 预览 框 唯一 标识 。 

代码 第 27 行 ， 定 义 函 数 guid， 用 于 产生 唯一 标识 符 ， 每 次 执行 后 计数 加 1。 

代码 第 37 行 ， 给 图 片 预览 框 添加 id， 规 则 为 “J_ ”加 上 唯一 标识 符 ， 以 免 元 素 id 重复 。 
代码 第 38 行 将 文件 类 型 名 转化 为 小 写字 符 串 ， 然 后 用 正则 表达 式 匹 配 image 字 符 串 。 如 果 


匹配 成 功 ， 表 示 该 文件 为 图 片 类 型 。 


代码 第 39 行 ， 实 例 化 FileReader 对 象 。FileReader 拥 有 以 下 几 个 常用 方法 。 


机 
[es 


readAsArrayBuffer: 将 文件 读 取 为 ArrayBuffer 对 象 。 
readAsBinaryString: 将 文件 读 取 为 二 进 制 字符 囊 。 
readAsDataURL: 将 文件 读 取 为 Base64 编 码 数据 。 
readAsText: 将 文件 读 取 为 文本 。 

abort: 停止 读 取 文件 。 


想 了 解 更 多 FileReader 接 口 信 息 可 以 参考 http://www.w3.org/TR/file-upload/#dfn-filereader。 


代码 第 40 行 ， 监 听 FileReader 实 例 的 load 事 件 。FileReader 的 事件 模型 如 下 。 


onabort: 读 取 文 件 中 断 时 触发 。 
onerror: 读 取 文 件 出 错时 触发 。 
onload: 读 取 文 件 成 功 完成 时 触发 。 
onloadend: 读 取 文件 结束 时 触发 。 
onloadstart: 读 取 文 件 开始 时 触发 。 
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。 onprogress: 读 取 文 件 中 触发 。 


代码 第 42 行 、 第 43 行 ， 在 文件 读 取 成 功 结束 后 执行 ， 找 到 对 应 的 单元 格 元 素 ， 将 拼接 的 
图 片 HIML 结 构 填 充 至 单元 格 。 其 中 ，etargetresult 为 对 应 文件 获取 的 Base64 编 码 数据 。 


5.11.4 相关 知识 


Base64 编 码 是 一 种 基于 64 个 可 打印 字符 来 表示 二 进 制 数据 的 表示 方法 。 现 代 的 浏览 器 都 已 
经 原生 支持 Base64。 可 以 用 在 如 以 上 示例 的 环境 ， 通 过 浏览 器 的 API 读 取 图 片 文件 的 Base64 编 
码 然后 设置 图 片 ， 还 可 以 用 在 将 Canvas 另 存 为 图 片 文件 时 。 并 且 这 也 是 前 端 优化 的 一 项 重要 技 
巧 ， 通 过 Base64 处 理 图 片 ， 达 到 减少 HTTP 请 求 数 的 优化 效果 ， 俗 称 Data URI scheme， 更 多 信息 
来 自 http:/zh.wikipedia.org/zh-cn/Base64 和 http://en.wikipedia.org/wikiData_URI scheme。 


5.12 示例 12 无 刷新 异步 上 伟 


5.12.1 示例 效果 


本 示例 在 示例 11 的 基础 上 进一步 加 强 了 用 户 体验 。 用 户 可 以 通过 不 刷新 页 面 上 传 多 个 文 
件 ， 并 同时 显示 客户 端 上 传 进度 。 
首先 启动 上 传 Web 服 务 器 。 使 用 Windows 命 令 行 进 入 “012.upload-server” 文 件 夹 ， 执 行 


命令 如 下 : 


node server.js 
如 果 启 动 成 功 ， 命 令 行 提示 如 下 : 
listening on http://localhost:8080 


使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效 果 如 图 5.40 所 示 。 


图 5.40 使 用 Chrome 打 开 网 页 文件 
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[hr 
志 


击 “ 选 择 文件 ”按钮 ， 选 择 “ 图 片 库 ”中 的 图 片 文 件 和 两 个 非 图 片 文件 ， 如 图 5.41 所 示 。 


司 Subversion 
国 视频 
加 图 上 

习 文 档 
EC 
中 音乐 


文件 名 (N): |" 考 拉 jpg" "灯塔 jpg”" 企 她 jpg”" 到 | 所 有 文件 | 
| 


图 5.41 选择 图 片 文件 和 两 个 非 图 片 文件 


单 击 “ 打 开 ” 按 钮 ， 下 方 生成 上 传 文件 列表 并 显示 图 片 预 览 和 上 传 进度 框 。 如 果 选 中 的 
文件 为 图 片 类 型 ， 则 在 预览 框 内 展现 缩 略 图 片 ， 否 则 显示 为 空 ， 如 图 $.42 所 示 。 


Tulips jp 


图 5.42 上 传 文件 列表 和 图 片 预览 ， 增 加 上 传 进度 列表 


单 击 “ 提 交 ” 按 钮 ， 文 件 被 依次 上 传 到 服务 器 ， 上 传 进度 条 同时 产生 变化 直到 上 传 结 
束 ， 如 图 5.43 所 示 。 


全 |HTML 5 网 页 开发 实 风 详 外 


类 型 


image/ JPeE 


Lighthouse jpe imaga/ jpeE 


Penguins jpe image/jpeg 


Tulips jpe image/jpeE 


application/vnd 
openxnlfornats 
-officedocunent 
Spreadsheetm] 
sheet 


text/plain 


图 5.43 单 击 “ 提 交 ” 按 钮 上 传 文件 


5.12.2 代码 设计 
利用 编辑 器 打开 “012. 无 刷新 异步 上 传 html” 文 件 ， 代 码 如 下 : 


01 <!dqoctype html> 


02 <html> 

03 <head> 

04 <style> 

05 /* 与 示例 009 基 本 相同 ， 略 ... */ 

06 input [type="file"] /* 上 传 控件 样式 */ 
07 { 

08 width: 300px; 

09 } 

10 .progressbar /* 进度 条 外 框 样式 */ 
i i 

2 border: lpx solid #dddddqd; 

T3 border-radius: 4px; /* 圆 角 ， 水 平 半径 为 4px */ 
14 -moz-border-radius: 4px; 

Ls —webkit-border-radius: 4px; 

16 width: 80px; 

下 了 height: 14px; 

18 1 

19 -progressbar-value /* 进度 条 数值 样式 */ 
20 不 

六 和 margin: -lpx; 

7 height: 100%; 

> border: lpx solid #e78f087 

24 border-radius: 4px; 
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有 5 
26 
27 
28 
28 
30 
上 
32 
33 
34 
35 


36 
六 
38 
39 
40 
41 
42 
43 
44 


45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 


56 
57 
58 
59 
60 
61 
62 
63 
64 


65 


66 


67 


68 


-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
background-color: #f6a828; 
1 
</style> 
</head> 
<body> 
<header><h2> 无 刷新 异步 上 传 </h2></header> 
<section> 
<!-- 表单 编码 类 型 为 “multipart/form-data”，post 到 本 机 服务 器 8080 端 口 
<form method="post" enctype="multipart/form-data" 
action="http://localhost:8080" > 
<!-- 多 文件 上 传 控 件 ， 增 加 了 multiple 属 性 --> 
<input 七 YP4 file" name="multi-file" multiple /> 
<input type="submit" value=" 提 交 " /> 
</form> 
<!-- 文件 显示 列表 --> 
<table><tr><td> 空 </td></tr></table> 
<!-- 列表 标题 模板 --> 
<script id="J head tpl" type="text/x-html5-tmpl"> 
<tr><th> 文 件 名 </th><th> 类 型 </th><th> 大 小 </th><th> 预 览 


</th><th> 上 传 进度 </th></tr> 
</script> 
<!-- 列表 单行 模板 --> 
<script id="J item tpl" type="text/x-html5-tmpl"> 
<tr> 
<td>{name}</td> 
<td>{type}</td> 
<td>{size}</td> 
<td id="J {guid}"></td> 
<td> 
<div class="progressbar"> 
<div class="progressbar-value" 
style="display:none" id="J p_{guid}"></div> 


</div> 
</td> 
</Er> 
</script> 
</section> 
</body> 
<script> 
(function () { 


Var multi file = document.querySelector('input [type=file] '), 
// 获取 上 传 控件 

file list = document .querySelector('table'), 

// 获取 列表 控件 

submit = document .querySelector('input [type=submit]'), 

// 获取 提交 按钮 

form = document .querySelector('form’'), 

// 获取 页 面 表单 


slice = Array-.prototype.slice, 


--> 
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69 


70 


了 7 


I 


73 
74 
75 


76 


池 尖 


78 


3 
80 
81 


82 


83 


84 
85 
86 


87 
88 
89 
90 
9 


92 
23 
94 
95 
96 
37 
98 
99 


100 


101 


102 
103 


// 获取 数组 slice 原 型 方法 

form action = form.getAttribute('action'), 

// 获取 表单 提交 远程 地 址 

head tpl = document .getElementById('J head tpl').innerHTML, 
// 获取 列表 标题 模板 

item tpl = document .getElementById('J item tpl').innerHTML, 
// 获取 列表 单行 模板 

file map = {}; 

// 缓存 文件 对 象 


Var GUID = 07 
function guid() { return GUID++7 }; 
// 全 球 唯一 标识 符 生 成 函数 
function substitute (template, params) { 
// 工具 方法 ， 用 对 象 替 换 字符 串 中 的 占 位 符 
return ('' + template) .replace(/\\2?\{([^{}]+)\}/g, 
function (match, name) { 
return match.charAt (0) === '\\' ? match.slice(1) 
(params [name] != null ? params[name] : ''); 
Ds; 
] 
function upload file (file，gid) { 
// 用 于 上 传单 个 文件 
Var xhr = new XMLHttpPRedquest ()， 
// 实例 化 xMLHttpRequest， 用 于 与 后 台 通信 
formData = new FormData(), 
// 实例 化 Formpata， 用 于 存储 表单 数据 信息 
// 通过 传 入 的 gid 获取 对 应 上 传 文件 的 显示 进度 条 
progress = document .getElementById('J p_' + gid) 7 
formData.append('file', file); 
// 添加 文件 数据 到 formData 对 象 
// 初始 化 HTTP 请 求 ， 设 置 请 求 类 型 、 地 址 、 是 否 异 步 
xhr.open('post', form action, true); 
// 监听 xMLHttpRequest 对 象 的 load 事 件 ， 读 取 完 毕 后 触发 
xhr.addEventListener('load', function () { 
var data = JSON.parse (xhr.responseText); 
// 将 返回 的 字符 串 转化 为 对 象 
console.1log('! 上 传 完毕 : "+ file.name); 
console.1log (data.msg); 
Ds 
// 监听 XMLHttpRequest 对 和 象 的 progress 事 件 ， 读 取 完 毕 后 触发 
xhr.upload.addEventListener('progress', function (e) { 
Var percent; 
if (e.lengthComputable) { // 是 否 可 以 计算 上 传 字 节 数 
percent = (e.loaded / e.total * 100) + '%'; 
// 上 传 字 节 数 除 以 总 字 节 数 得 到 上 传 进度 百分比 
progress.style.width = percent; 
// 更 新 上 传 进度 条 样式 为 当前 上 传 比例 相同 
progress.innerHTML = percent; // 更 新 上 传 百分比 


]) 


246 


ER 第 5 齐 。 |TML 5 元 来 与 表单 大 演练 


104 xhr.send (formData); // 发 送 数据 到 服务 器 
105 progress.style.display = ''; 
106 人 
107 
108 multi file.addEventListener('change', function (e) { 
// 监听 上 传 控 件数 据 变化 
109 var files = slice.call (multi file.files, 0), 
// 将 FileList 对 象 转 为 数组 获取 forEach 方 法 

110 htmls = [head tpl1]; // 初始 化 数组 ， 填 充 列表 标题 
TI file map = {}; // 重 置 文件 缓存 对 象 
2 files.forEach (function (file，index) { // 循环 File 数 组 
113 var reader, // reader 变 量 存放 FileReader 实 例 
114 _guid = guid(); // 获取 全 球 唯一 标识 符 
了 了 和 htmls.push(substitute(item tpl, { 

// 组 装 File 对 象 的 name、type、size 属 性 
116 name: file.name, 
3 type: file.type, 
118 size: file.size, 
443 guid: _guid 
120 Py 
2 if (file.type.toLowerCase() .match(/image.*/)) { 

// 用 正则 表达 式 判断 文件 是 否 为 图 片 类 型 
122 reader = new FileReader(); 

// 实例 化 FileReader 对 象 ， 用 于 读 取 文件 数据 
.29 reader.addEventListener('load', function (e) { 
// 监听 FileReader 实 例 的 load 事 件 
124 // 获取 对 应 元 素 ， 并 填充 相应 图 片 
125 document .getElementById('J ' + _guid) .innerHTML = 
126 '<img title="' + file.name + '" alt="' + file.name + '" src="' 
+ e.target.result + '"/>'; 
127 i 
128 reader .readAsDataURL (file); // 读 取 文 件 为 DataURL 
129 }; 
130 file map[_guid] = file; // 存储 文件 到 临时 缓存 对 象 ， 用 于 提交 保存 
131 Ds 
132 file list.innerHTML = htmls.join(''); 
// 填充 列表 htm1l， 显 示 选择 文件 
长 | }, false); 
134 submit.addEventListener('click', function (e) { 
// 监听 提交 单 击 事件 

135 e.preventDefault (); // 取消 表单 提交 按钮 事件 的 默认 动作 
136 for (var gid in file map) { // 循环 文件 缓存 列表 
L377 upload file (file map[lgid], gid); 

// 调用 upload file 方 法 ， 传 入 文件 对 象 和 gid 
138 1 
3 }, false); 


140 ]) (); 
141 </script> 
142 </html> 


利用 编辑 器 打开 “012.upload-server” 文 件 夹 中 的 server.js 文 件 ， 代 码 如 下 : 
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01 


02 
03 
04 
05 
06 
07 
08 
09 
10 


1 
2 
13 
14 
15 
16 
Ly 
18 


19 
20 
21 
22 
| 
24 
25 
26 
这 有 
28 
PP 
30 


Eh 
32 
33 
34 


35 
36 
3 
38 
39 
40 
41 


Var formidable = require("formidable"), 
// 引用 formidable 模 块 ， 用 于 文件 保存 
二 // 引用 fs 模块 ， 用 于 对 文件 操作 
http = require("http"); // 引用 http 模 块 ， 用 于 web 服 务 器 
http .createServer (function (req res) { // 创建 新 服务 器 
var form = new formidable.IncomingForm()，// 新 建 form 实 例 
files = []; // 新 建 files 数 组 ， 用 于 存储 上 传 文件 实例 
// 所 有 域名 跨 域 访问 均 可 以 通过 
res.setHeader('Access-Control-Allow-Origin', '*"'); 
// 服务 器 支持 'OPTIONS，HEAD，GET，POST，PUT，DELETE， 方法 
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS， HEAD, 
GET, POST, PUT, DELETE'); 


// 浏览 器 Ajax 跨 域 会 发 送 两 个 请 求 ， 第 一 个 请 求 方法 为 OPTIONS， 预 检查 服务 器 
if (req.method == 'OPTIONS') { 
res.end(); 
} else { 
form.on('end', function () { // 监听 form 上 传 结束 事件 
res.write(JSON.stringify({ // 写 入 上 传 成 功 状态 码 和 信息 
"code": 200， 


"msg": “上 传 成 功 ， 文 件 已 经 保存 到 服务 器 ， 远 程 路 径 : ， 


+ form.uploadDir 


1D))s; 
res.end(); // 响应 结束 

}) .on('file'，function (field, file) {  // 监听 form 文 件 上 传 事件 
files.push (file); // 将 上 传 文件 的 fle 实 例 存 入 数组 


}) .on('error', function (error) { // 监听 form 上 传 出 错 事件 


res.write (JSON.stringify({ // 写 入 上 传 失 败 状态 码 和 信息 


scoders 5007 
"msg": "上 传 失败 ,，' + error 
DD)s; 
res.end(); 
]) 7 
form.parse(req, function (err) { 


// 调用 parse 接 口 解 析 请 求 信息 并 保存 文件 


files.forEach (function (item, index) { // 循环 上 传 的 文件 数组 


console.log (item.name); // 在 控制 台 显示 文件 名 
// 将 上 传 至 服务 器 端的 文件 名 重 命名 为 原文 件 名 


fs .rename (item.path, form.uploadDir + '\\' + item.name, 
function (err) { }); 
Ds; 
Fs 

] 7 
}) .listen(8080, function () { // 设置 Web 服务 器 监听 端口 ， 并 启动 服务 

// 控制 台 显示 Web 服 务 器 启动 成 功 

console.log('listening on http://localhost:8080°'); 
Ty 
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5.12.3 代码 分 析 


1. 客户 端 网 页 代码 分 析 

在 CSS 中 增加 了 进度 条 样式 ， 并 调整 了 上 传 控 件 的 宽度 ， 见 代码 第 6 行 ~ 第 28 行 。 

HIML 代 码 增加 两 个 模板 ， 分 别 用 于 列表 的 标题 和 列表 的 行 元 素 ， 见 代码 第 43 行 ~ 第 45 行 
和 代码 第 47 行 ~ 第 59 行 。 

代码 第 66 行 ， 通 过 调用 document 的 querySelector 方 法 获取 页 面 上 传 控件 元 素 。 
querySelector 方 法 根据 CSS 选 择 器 规范 获取 文档 中 的 指定 元 素 ， 更 多 的 应 用 接口 信息 可 参考 网 


棍 _ 
| 凤 ; 
< 站 http://www.w3.org/TR/selectors-api/。 


代码 第 70 行 和 71 行 ， 获 取 存 放 在 script 标 签 内 的 模板 内 容 。 后 面 会 利用 函数 substitute 将 对 
象 写 入 模板 ， 获 取 对 应 的 HTML 结 构 。 
代码 第 72 行 定义 了 一 个 临时 对 象 ， 用 于 存储 上 传 列 表 的 文件 对 象 。 
代码 第 76 行 ~ 第 80 行 定义 函数 substitute， 传 入 template 和 params 参 数 。template 为 String 类 型 ， 
户 的 自 定义 模板 。params 为 Object 类 型 ， 表 示 数 据 对 象 字面 量 ， 使 用 方法 代码 如 下 ; 
Var template = "{name} is The New HTML Standard"; 
Var params = { "name": "HTMLS5" }; 
console.log(substitute (template, params)); // "HTML5 is The New 
HTML Standard" 
代码 第 81 行 -第 106 行 定义 本 示例 关键 函数 upload_file， 用 于 实现 无 刷新 上 传单 个 数据 文件 。 
代码 第 82 行 实例 化 XMLHpRequest 对 象 ， 用 于 对 HTTP 协 议 进行 访问 ， 是 Ajax 技术 的 核心 


要 Ai ax 表示 异步 JavaScript 和 XML， 是 一 种 利用 XMLHttpRequest 与 服务 器 进行 通信 ， 通 过 
I 国 下 JavaScript 无 刷新 改变 页 面 的 Web 技 术 。 在 各 种 浏览 器 上 实现 时 具有 一 定 的 差异 ，IE 下 使 用 
ActiveXObject。 


代码 第 83 行 实例 化 formData 对 象 ， 用 于 存储 表单 数据 。HTML 5 的 formData 的 出 现 ， 方 便 
了 XMLHttpRequest 的 请 求 头 设置 ， 在 每 次 传递 过 程 中 会 配置 适当 的 HTTP 头 信息 。 

代码 第 86 行 ， 调 用 formData 对 象 的 append 方 法 ， 将 传 入 的 文件 对 象 推 入 刚刚 实例 化 的 
formData 对 象 中 。 

代码 第 88 行 ， 调 用 XMLHttpRequest 的 open 方 法 ， 传 入 请 求 方法 类 型 、 上 传 服务 器 地 址 和 
是 否 异步 三 个 参数 值 。 

代码 第 90 行 ~ 第 94 行 监听 XMLHttpRequest 的 load 状 态 ， 在 每 次 上 传 完毕 以 后 触发 。 代 码 
第 91 行 获取 返回 的 responseText， 并 通过 JSON 的 parse 方 法 将 返回 字符 串 转 换 为 数据 对 象 。 

代码 第 96 行 ~ 第 103 行 监听 XMLHttpRequest 的 progress 状 态 。 代 码 第 98 行 通过 监听 ， 回 调 
函数 返回 数据 e， 该 值 为 ProgressEvent 对 象 。 

ProgressEvent 接 口 继承 至 Event， 同 时 增加 了 三 个 属性 ， 接 口 代码 如 下 。 


表示 


酒 


interface ProgressEvent : EVent { 
readonly attribute boolean lengthComputable; 
readonly attribute unsigned long long loaded; 
readonly attribute unsigned long long total; 
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] 7 

。 lengthComputable: 上 传 字 节 数 可 计算 时 返回 true。 
。 loaded: 已 上 传 字 节 数 。 

。 total: 总 字 节 数 。 


代码 第 104 行 ， 调 用 XMLHttpRequest 的 send 方 法 ， 发 送 formData 数 据 到 远程 服务 器 。 
2. 服务 器 端 代 码 分 析 


服务 器 端 代 码 也 做 了 部 分 调整 ， 增 加 了 HTTP 响 应 头 信息 和 HTTP 请 求 方法 OPTIONS 的 处 
理 逻 辑 。 

XMLHttpRequest 跨 源 资源 共享 需要 服务 器 端 在 响应 时 发 送 “Access-Control-Allow- 
Origin” 头 信息 ， 示 例 代码 中 将 该 信息 的 值 设置 为 “*”， 表 示人 允许 所 有 域 请 求 。 同 时 设置 
“Access-Control-Allow-Methods” 头 信息 为 “OPTIONS,HEAD,GETPOSTPUTDELETE”， 

表示 服务 器 允许 接收 字符 串 中 出 现 的 HTTP 方 法 ， 代 码 如 下 所 示 : 
res.setHeader('Access-Control-Allow-Origin’', '*"'); 
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS， HEAD, GET, POST, 
PUT, DELETE' ) 7 
代码 第 12 行 ~ 第 13 行 判断 HTTP 请 求 是 否 是 OPTIONS 类 型 ， 如 果 是 则 立刻 返回 响应 。 
XMLHttpRequest 在 做 跨 源 资 源 请 求 时 ， 会 预先 向 远 端 服 务 器 发 送 一 个 OPTIONS 方 法 的 请 求 ， 
用 于 预 检测 服务 器 是 否 可 以 安全 发 送 。 


下 示 更 多 关于 OPTIONS 方 法 在 XMLHttpRequest 的 信息 可 以 参考 http://www.w3.org/TR/cors/ 和 http:// 
区 hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/ 中 的 两 篇 文章 。 


5.12.4 相关 知识 
HTTP 规 范 中 定义 了 8 种 请 求 方法 ， 分 别 如 下 。 


。 GET: 向 指定 资源 发 出 请 求 。 

。 POST: 向 指定 资源 提交 数据 处 理 请 求 。 

。 HEAD: 向 指定 资源 发 送 请 求 ， 只 返回 响应 消息 头 中 的 元 信息 ， 不 返回 响应 内 容 。 
。 PUT: 向 指定 资源 位 置 上 传 其 最 新 内 容 。 

。 DELETE: 请 求 服务 器 删除 Request-URI 所 标识 的 资源 。 

。 OPTIONS: 返回 资源 服务 器 支持 的 HTTP 请 求 方法 。 

。 TRACE: 回 显 服务 器 收 到 的 请 求 ， 主 要 用 于 测试 或 诊断 。 

。 CONNECT: 协议 中 预 留 给 能 够 将 连接 改 为 管道 方式 的 代理 服务 器 。 
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5.13 示例 13 拖 抱 上 传 文件 


5.13.1 示例 效果 


接着 之 前 的 上 传 示例 ， 本 例 进一步 通过 HTML 5 增强 用 户 体验 ， 这 次 新 加 入 的 功能 是 
息 。 用 户 可 以 直接 将 文件 夹 中 的 文件 拖 入 列表 框 ， 鼠 标 松 开 后 ， 页 面 列表 呈现 出 刚刚 拖 入 文 
件 的 信息 ， 与 通过 上 传 控件 选择 文件 呈现 的 效果 相同 。 

启动 上 传 Web 服 务 器 ， 本 例 继续 沿用 示例 12 的 上 传 Web 服 务 器 。 使 用 Chrome 浏 览 器 打开 
网 页 文件 ， 运 行 效果 如 图 5.44 所 示 。 


图 5.44 使 用 Chrome 打 开 网 页 文件 


选中 文件 夹 中 的 文件 ， 拖 入 浏览 器 列表 框 。 移 入 时 ， 列 表 边 框 变 为 黄色 虚线 ， 如 图 5.45 
所 示 。 


0 1 
1 1 
0 1 
0 宇 辣 稳 和 ) 1 
1 1 
D 1 
LD 1 


文件 中 蝙 各 如 ”查看 工具 C) 帮助 0 
二 > 加 全 MISe 表 休 中文 声 打开 共享 


副 
二 | 琶 


司 请 
EE 1 
国 1 
Sn | EP 


图 5.45 选中 文件 拖 入 浏览 器 


人 |HTML 5 网 页 开发 实 风 详 外 


松 开 鼠标 ， 列 表 显 示 文 件 的 “文件 名 ”、“ 类 型 "、“ 大 小 ”、 
信息 ， 运 行 效果 如 图 5.46 所 示 。 


类 型 预览 | 上 传 进度 


Lighthouse. jp 


Penguins. jpe image/ jpeg 


imagayjpag 


application/vnd 
encml formats 
-offi nt 


spreadsheetal 
sheet 


text/plain 


图 5.46 显示 的 文件 信息 


单 击 “ 提 交 ” 按 钮 ， 文 件 被 依次 上 传 到 服务 器 ， 如 图 5.47 所 示 。 


Lighthouse, jpe image/ jpeg 


image/jpeg 


Tulips, jpe inage/jpeg 


text/plain 


图 5.47 单 击 “ 提 交 ” 按 钮 上 传 文件 


5.13.2 代码 设计 


利用 编辑 器 打开 “013. 拖 揭 上 传 文件 .html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 
02 <html> 
03 <head> 


“预览 ”、 


全 上 传 进度 ” 
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04 
05 
06 
07 
08 
09 
10 
11 
EZ 
13 
14 
15 
16 
1 
18 
下 3 
20 
ph 
4 
23 
24 
25 
26 
2 
28 
29 
30 
Eh 
32 


| 


34 


35 


36 


37 


38 
29 


40 
41 


42 
43 
44 
45 


46 


<style> 
/* 同 示例 012 */ 
.hover /* 文件 拖 入 列表 提示 样式 */ 
| 
border:4px dashed orange; 
height:190px; 
margin-top:10px; 
1 
</style> 
</head> 
<body> 
<header><h2> 拖 忠 上 传 文件 </h2></header> 
/* 同 示例 012 */ 
</body> 
<script> 
(function () { 


/* 同 示例 012 */ 


function render list(files) { // 初始 化 数组 ， 填 充 列 表 标 题 
file map = {}; // 重 置 文件 缓存 对 象 
files .forEach (function (file，index) { // 循环 File 数 组 
var reader, // reader 变 量 存放 FileReader 实 例 
_guid = guid(); // 获取 全 球 唯 一 标识 符 


htmls.push (substitute (item tpl，{ // 组 装 File 属 性 为 html 
name: file.name, 
type: file.type, 
size: file.size, 
guid: _guid 
]))7 
if (file.type.toLowerCase () .match(/image.*/)) { 
// 用 正则 表达 式 判 断 文件 是 否 为 图 片 类 型 
reader = new FileReader(); 
// 实例 化 FileReader 对 象 ， 用 于 读 取 文 件数 据 
reader.addEventListener('load', function (e) { 
// 监听 FileReader 实 例 的 load 事 件 
// 获取 对 应 元 素 ， 并 填充 相应 图 片 
document .getElementById('J ' + _guid) .innerHTML = 
"<img title="' + file.name + '" alt="' 37 + file.name + '" src="' 
+ e.target.result + '"/>'; 
Ds; 
reader.readAsDataURL (file); 
// 读 取 文件 为 DataURL 
3 
file map[_guid] = file; 
// 存储 文件 到 临时 缓存 对 象 ， 用 于 提交 保存 
Ds; 
file list.innerHTML = htmls.join(''); 
LE 
multi file.addEventListener('change', function (e) { 
// 监听 上 传 控件 数据 变化 
render list(slice.call (multi file.files, 0)); 


// 将 FileList 对 象 转 为 数组 获取 forEach 方 法 
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}, false); 
submit.addEventListener('click', function (e) { 
// 监听 提交 单 击 事件 
e.preventDefault (); 
// 取消 表单 提交 按钮 事件 的 默认 动作 
for (var gid in file map) { 
// 循环 文件 缓存 列表 调用 upload _ file 上 传 文件 
upload file (file maplgid], gid); 
Fs 
}r. false)s? 
file list.addEventListener('dragenter', function (e) { 
// 按 下 鼠标 ， 该 元 素 被 拖 入 时 触发 
e.preventDefault (); 
this.className = "hover'7 
}, false); 
file list.addEventListener('dragleave', function (e) { 
// 当 鼠 标 拖 电离 开 该 元 素 时 触发 
e.preventDefault (); 
this.className = ''; 
}, false); 
file list.addEventListener('dragover', function (e) { 
// 当 鼠 标 拖 奥 该 元 素 移动 时 触发 
e.preventDefault (); 
}, false); 
file list.addEventListener('drop', function (e) { 
// 鼠标 拖 忠 该 元 素 释 放 时 触发 
e.preventDefault (); 
this.className = ''; 
render list(slice.calll(e.dataTransfer .files, 0)); 
}, false); 


1D) () 7 
</script> 
</html> 


所 _ 
| 臣下 ”上传 服务 器 端的 运 辑 代码 沿用 示例 12。 


5.13.3 代码 分 析 


代码 第 21 行 ~ 第 44 行 定义 函数 render_list， 用 于 读 取 文 件 构建 时 显示 列表 文档 。 

代码 第 54~69 行 分 别 监听 了 dragenter、dragleave、dragover、drop 事 件 。 

当 文 件 被 拖 入 列表 时 ， 触 发 dragenter 事 件 ， 此 时 设置 列表 的 样式 为 hover， 显 示 层 上 表现 
为 出 现 黄色 虚线 框 。 

当 鼠 标 拖 忠 并 且 未 松 开 ， 离 开 列表 时 ， 触 发 dragleave 事 件 ， 还 原 列表 样式 并 且 黄 色 虚 线 


框 消失 。 


当 鼠 标 拖 护 文件 在 列表 上 时 ， 触 发 dragover 事 件 〈 不 管 鼠 标 是 否 移动 都 会 多 次 触发 ) ， 
此 时 必须 调用 传 入 回调 函数 事件 对 象 的 preventDefault 方 法 ， 阻 止 默认 行为 ， 否 则 无 法 触发 
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drop 事 件 。 
当 松 开 鼠标 时 ， 触 发 drop 事 件 ， 回 调 函 数 获取 数据 对 象 e， 该 对 象 为 DragEvent (继承 至 
MouseEvent) ，DragEvent 接 口 代码 如 下 : 


interface DragEvent : MouseEvent { 


}; 


readonly attribute DataTransfer? dataTransfer; 


通过 DataTransfer 的 fles 属 性 获取 拖 护 的 文件 列表 ， 传 入 render list 函 数 进行 展现 。 
DataTransfer 接 口 代码 如 下 : 


interface DataTransfer 


{ 


attribute DOMString dropEffect; // 设置 用 户 完成 放置 后 的 动作 
attribute DOMString effectAllowed; // 设置 允许 的 拖 动 操作 
readonly attribute DataTransferItemList items; 

// 存 取 DataTransferItem 对 象 接口 

void setDragImage (Element image, long x, long y); 

// 设置 拖 忠 元 素 时 随和 鼠标 移动 的 图 片 

readonly attribute DOMString[] types; 

// 返回 aragstart 触 发 时 为 元 素 的 存储 数据 类 型 

DOMString getData (DOMString format); 

// 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返回 空 字符 串 

void setData (DOMString format, DOMString data);// 

为 元 素 添加 数据 ，dragstart 事 件 触发 时 为 拖 电 元 素 存储 数据 

void clearData (optional DOMString format); 

// 删除 指定 格式 的 数据 ， 如 果 不 指定 格式 则 删除 全 部 数据 

readonly attribute FileList files; 


// 如 果 拖 外 的 是 系统 文件 ， 返 回 正在 拖 奥 的 文件 列表 
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Canvas 是 一 种 全 新 的 HTML 元 素 ， 可 以 通过 JavaScript 语 言 来 绘制 图 
形 ， 例 如 画图 、 处 理 图 像 合 成 、 制 作 动画 ， 甚 至 是 游戏 。Canvas 被 认为 是 
HTML 5 最 为 期 待 的 特性 之 一 。 本 章 将 从 常规 图 形 绘制 、 文 字 绘制 、 颜 色 渐 
变 和 图 片 生 成 出 发 ， 介 绍 Canvas 的 各 种 技术 ， 接 着 会 通过 制作 动画 计时 器 
和 相片 的 360" 旋转 功能 了 解 更 多 的 Canvas 使 用 技巧 ， 最 后 给 读者 带 来 使 用 
Canvas 制 作 数据 报表 和 动画 的 实际 案例 。 

本 章 知识 点 : 


。 绘制 图 形 
。 制作 动画 
。 制作 HTML 5 版 销售 数据 表 


6.1 示例 1 绘制 图 形 〈 和 矩形 和 圆 形 ) 


6.1.1 示例 效果 


画图 软件 已 经 不 再 是 本 地 应 用 的 专利 了 ， 越 来 越 多 的 网 站 提供 了 在 线 版 的 画图 应 用 。 有 
的 通过 Flash 实 现 ， 有 的 通过 HTML 5 实现 。 本 例 给 出 了 用 HTML 5 实现 的 简单 画板 。 画 板 分 成 
两 个 部 分 ， 第 一 部 分 为 矩形 ， 另 外 一 个 为 圆 形 。 两 部 分 都 有 一 个 调节 区 和 一 个 画布 区 。 画 布 
区 默认 绘制 一 个 对 应 图 形 ， 调 整 颜色 控件 或 拖 动 滑 块 同步 作用 于 绘制 的 图 形 。 通 过 本 示例 可 
以 了 解 Canvas 图 形 绘制 接口 的 使 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运行 效果 如 图 6.1 所 示 。 
单 击 “ 和 矩 形 ” 颜 色 控件 ， 设 置 画布 中 黄色 和 矩 形 颜色 为 红色 ， 然 后 间 
件 ， 设 置 画布 中 蓝 色 圆 形 颜色 为 绿色 ， 效 果 如 图 6.2 所 示 。 


世 
中 
过 


“ 圆 形 ”颜色 控 
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图 6.1 使 用 Chrome 打 开 网 页 文件 图 6.2 调整 “矩形 ”和 “ 圆 形 ” 颜 色 控件 


6.1.2 代码 设计 
利用 编辑 器 打开 “001. 绘 制图 形 ， 矩形 和 贺 形 .html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 


02 <html> 

03 <head> 

04 <style> 

05 ul{ float: left; list-style: none; } 

06 hr{ clear: both; |} 

07 canvas{ border:2px solid black float:left; margin:1l5px; } 

08 </style> 

09 </head> 

10 <body> 

LL <header><h2> 绘 制图 形 : 和 矩形 和 圆 形 </h2></header> 

12 <!-- 矩形 canvas 画 布 设置 区 --> 

3 <ul> 

14 <1i><h3> 和 矩形 </h3></1i> 

15 <1i> 颜 色 : <input id="color rect" type="color" value="#eabb02" 
/></1i> 

16 <1i>X 轴 : <input id="x rect" type="range" min="0" max="150" 
value="75" step="1" /></1i> 

rh <1i>Y 轴 : <input id="y_rect" type="range" min " max="150" 
value="75" step="1" /></1i> 

18 <1i> 宽 度 : <input i width rect" type="range" min " max="200"™" 
value="50" step="1" /></1i> 

19 <1i> 高 度 : <input id="height rect" type="range" min="0" max="200" 
value="50" step="1" /></1i> 

20 </ul> 

2 <!-- 圆 形 canvas 画 布 设置 区 --> 

<ul> 

23 <1i><h3> 圆 形 <h3></1i> 

24 <1i> 颜 色 : <input id="color circle" type="color" 
value="#506cc0"/></1i> 

25 <1i>X 轴 : <input id="x circle" type="range" min: 
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value="100" step="1" /></1i> 
26 <1i>Y 轴 : <input id="y circle" type="range" min="0" max="200" 
value="100" step="1" /></1i> 
2 <1i> 半 径 : <input id="radius circle" type="range" min="0" 
max="100" value="25" step="1" /></1i> 
28 </ul> 
29 <hr /> 
30 <!-- 和 矩形 canvas 画 布 --> 
EE <canvas id="canvas rect" width="200" height="200"></canvas> 
32 <!-- 圆 形 canvas 画 布 --> 
33 <canvas id="canvas circle" width="200" height="200"></canvas> 
34 </body> 
35 <3cript> 
36 (function () { 
37 // 获取 矩形 canvas 画 布 绘图 上 下 文 
38 Var content rect = document.getElementById('canvas rect'). 
getContext ("2d"), 
39 // 获取 圆 形 canvas 画 布 绘图 上 下 文 
40 canvas circle = document.getElementById('canvas circle'). 
getContext ("2d"); 
41 function draw rect() { // 获取 控件 数据 绘制 矩形 
42 content rect.clearRect (0, 0, 300, 300); 
// 清空 给 定 矩形 
43 content rect.fillstyle = color rect.value; 
// 填充 矩形 画布 原色 
44 content_rect .fillRect( // 填充 矩形 
45 parseInt (x_rect.value), // 矩形 左上 角 的 x 坐标 
46 parseInt (y_rect.value), // 和 扼 形 左上 和 角 的 y 坐 标 
47 parseInt (width rect.value)， // 和 矩形 的 宽度 ， 以 像素 计 
48 parseInt (height rect.value) // 矩形 的 高 度 ， 以 像素 计 
49 ) 
50 ] 7 
Sl Var color rect = document.getElementById('color rect'), 
// 获取 矩形 颜色 选择 元 素 
5 x _rect = document .getElementById('x rect'), 
// 获取 矩形 x 轴 滑 块 元 素 
53 Y_rect = document .getElementById('y _ rect'), 
// 获取 和 矩形 y 轴 滑 块 元 素 
54 width rect = document.getElementById('width rect'), 
// 获取 矩形 宽度 滑 块 元 素 
5 height rect = document.getElementById('height rect'); 
// 获取 矩形 高 度 滑 块 元 素 
56 // 循环 矩形 设置 元 素 ， 绑 定数 据 变更 change 事 件 
57 [color rect, x rect, y rect, width rect, height rect]. 
forEach (function (item) { 
58 item.addEventListener('change', draw rect, false); 
59 Ds; 
60 draw_ rect (); // 绘制 默认 矩形 
61 function draw circle() { // 获取 控件 数据 绘制 
62 canvas circle.clearRect(0, 0, 300, 300); 
// 清空 给 定 矩 形 
63 canvas circle.fillstyle = color circle.value; 
// 填充 矩形 画布 原色 
64 canvas circle.beginPath(); // 起 始 一 条 路 径 
65 canvas circle.arc( 
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parseInt (x circle.value), // 圆 中 心 的 x 坐标 
parseInt (Y_circle-value)， // 圆 中 心 的 y 坐标 
parseInt (radius circle.value), wt 圆 的 半径 
0v // 起 始 角 ， 以 弧度 计 
2 * Math.PI, // 结束 角 ， 以 弧度 计 
true // 逆 时 针 或 顺 时 针 绘 图 


) 


// (false: 顺 时 针 ，true: 道 时 针 ) 


canvas_circle.closePath(); // 创建 从 当前 点 回 到 起 始点 的 路 径 


canvas circle.fill (); 
] 7 


// 填充 当前 绘图 


Var color circle = document.getElementBYId('"color_circle')v 


// 获取 圆 形 颜色 选择 元 素 


X_circle = document.getElementById('x circle'), 


// 获取 圆 形 x 轴 滑 块 元 素 
Yclrel 


// 获取 圆 形 y 轴 滑 块 元 素 


= document .getElementById('y circle'), 


radius circle = document.getElementById('radius circle'); 


// 获取 圆 形 半径 滑 块 元 素 


// 循环 圆 形 设置 元 素 ， 绑 定数 据 变 更 change 事 件 


[color circle, x circle, y circle, radius circle]. 


forEach (function (item) { 


item.addEventListener('change', draw circle, false); 


J 
draw circle(); 
HA 
</script> 
</html> 


代码 分 析 


// 绘制 默认 圆 形 


代码 第 12~20 行 是 矩形 调节 区 的 HTML 结构 ， 第 21~28 行 是 圆 形 调整 区 的 HTML 结 构 。 
代码 第 31 行 和 第 33 行 分 别 是 矩 形 和 圆 形 的 画布 。 


代码 第 38 行 和 第 40 行 ， 分 别 从 文档 


获取 对 应 画布 的 上 下 文 。 


代码 第 41 行 ~ 第 50 行 为 函数 draw_rect， 用 于 在 画布 上 绘制 矩形 。 该 函数 第 42 行 代码 清 


空 画布 上 固定 矩形 区 域 的 内 容 ， 就 像 平 时 所 用 


法 如 下 : 


context.clearRect (x, y, width,height) 


x: 要 清除 的 矩形 左上 角 的 x 轴 坐标 。 
y: 要 清除 的 矩形 左上 角 的 y 轴 坐标 。 
width: 要 清除 矩形 的 宽度 ， 以 像素 计 。 
height: 要 清除 矩形 的 高 度 ， 以 像素 计 。 


的 橡皮 擦 。clearRect 方 法 拥有 4 个 参数 ， 语 


代码 第 43 行 ， 获 取 和 珑 形 调节 区 颜色 控制 的 值 ， 设 置 甜 形 画布 的 颜色 。 
代码 第 44 行 ~ 第 49 行 填充 一 个 矩形 ，fIRect 方 法 拥有 4 个 参数 ， 参 数 用 法 与 clearRect 方 法 


相同 ， 语 法 如 下 : 


context .fillRect (x, y, width,height) 
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代码 第 51~55 行 ， 获 取 和 矩形 调节 区 颜色 控件 和 各 滑 块 元 素 。 

代码 第 57~59 行 ， 监 听 甜 形 调节 区 各 控件 的 change 事 件 。 当 各 控件 的 值 发 生变 化 时 ， 调 用 
函数 draw_rect 重 新 绘制 矩形 。 

代码 第 60 行 ， 调 用 函数 draw_rect， 使 用 矩形 调节 区 各 控件 的 默认 值 绘制 默认 珑 形 。 
圆 形 区 的 代码 基本 与 矩形 区 的 相似 ， 只 是 在 调用 画布 上 下 文 的 方法 上 略 有 不 同 ， 绘 制 
形 通过 draw_circle 函 数 实现 。 
代码 第 64 行 ， 调 用 方法 beginPath， 告 诉 画布 开始 一 条 新 的 路 径 。 假 使 不 调用 该 方法 ， 每 
次 绘制 的 图 形 也 会 被 重 翅 。 

代码 第 65-73 行 ， 调 用 方法 arc 以 给 定 的 坐标 点 为 中 心 点 以 指定 半径 画 一 条 弧 ， 语 法 如 下 : 


画 


context. arc(x,y,radius,startAngle,endAngle,counterclockwise) 


x，y: 弧 圆 心 坐 标 。 

radius: 弧 半 径 。 

startAngle，endAngle: 缴 的 开始 点 和 结束 点 。 
counterclockwise: 设置 弧 沿 逆 时 针 或 顺 时 针 绘制 。 


代码 第 74 行 调用 closePath 方 法 关闭 之 前 打开 的 路 径 。 第 75 行 调用 fill 方 法 ， 使 用 设置 的 
fllStyle 属 性 颜色 填充 绘制 的 路 径 。 


6.2 示例 2 在 图 形 中 写字 


6.2.1 示例 效果 


随 着 互联 网 的 发 展 ， 图 片 已 成 为 人 们 分 享 信息 的 一 种 重要 手段 ， 但 随 之 而 来 的 图 片 盗用 
问题 成 为 了 阻碍 用 户 分 享 的 一 大 障碍 。 目 前 ， 被 认为 行 之 有 效 的 方法 是 给 用 户 上 传 的 图 片 加 
上 水 印 ， 防 止 图 片 被 盗用 。 本 例 提 供 了 HTML 5 加 水 印 的 解决 方案 。 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.3 所 示 。 


在 图 形 中 写字 


图 6.3 使 用 Chrome 打 开 网 页 文件 
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在 


拖 动 状态 。 拖 动画 布 框 


移动 到 
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单 击 “ 选 择 文件 ”按钮 ， 选 择 任意 图 片 并 打开 (示例 中 选择 了 “ 考 拉 ” 图 ) ， 效 果 如 图 


图 6.4 单 击 “ 选 择 文件 ”按钮 选择 一 张 图 片 并 打开 
画布 设置 区 调节 “ 宽 高 ” 滑 块 为 最 大 值 ， 然 后 将 光标 移入 画布 框 ， 此 时 光标 样式 变 为 


的 图 片 ， 直 到 合适 位 置 后 松 开 ， 效 果 如 图 6.5 所 示 。 


时 画布 内 出 现 


图 片 的 右 下 角 


图 6.5 调整 画布 大 小 并 拖 动 图 片 到 合适 位 置 


一 个 完整 的 考 拉 头 像 。 接 下 来 给 图 片 打上 水 印 “ 我 是 考 拉 ”， 并 将 水 印 


。 调 整 文字 的 字体 、 颜 色 和 大 小 ， 效 果 如 


图 6.6 所 示 。 
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图 6.6 调整 文字 内 容 和 样式 


6.2.2 代码 设计 


利用 编辑 器 打开 “002. 在 图 形 中 写字 .html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 


02 <html> 

03 <head> 

04 <style> 

05 ul /* 画布 调节 区 样式 */ 
06 ‘ 

07 float: left; 

08 list-style: none; 

09 font-size:13px; 

10 border: lpx solid #cccc99; 
hh border-radius: 3px; 

12 -moz-border-radius: 3px; 
E3 -webkit-border-radius: 3px; 
14 background-color: #cccc99; 
15 padding:10px; 

16 } 

17 hr{ clear: both; } 

18 canvas /* 画布 样式 */ 
和 4 

20 border:2px solid black; 

2 float:left; 

党 他 margin:15px; font-family: 
2 border-radius: Spx; 

24 -moz-border-radius: Spx; 

多 -Wwebkit-border-radius: Spx? 
26 证 
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2 -item /* 调节 区 元 素 行 样式 */ 
28 { 

29 padding-left:20px; 

30 } 

31 </style> 

32 </head> 

33 <body> 

34 <header><h2> 在 图 形 中 写字 </h2></header> 

5 <section> 

36 <!-- 矩形 canvas 画 布 设置 区 --> 

37 <ul> 

38 <1i><h3> 画 布 </h3></1i> 

39 <!-- 画布 长 宽 调节 区 --> 

40 <li class="item"> 宽 : <input id="width canvas" type="range" 


min="200" max="500" value="300" 
41 step="1" /></1i> 


42 <1i class="item"> 高 : <input id="height canvas" type="range" 

43 min="200" max="500" value="395" step="1" /></1i> 

44 <1i><h3> 图 片 </h3></1i> 

45 <!-- 图 片 选择 区 --> 

46 <1Li class="item"><input id="file img" type="file" Value=" 
在 图 形 中 写字 " /></1i> 

47 <!-- 文字 设置 区 --> 

48 <1i><h3> 文 字 </h3></1i> 

49 <li class="item"> 字 体 : 

50 <select id="family font"> 

51 <option "宋体 "> 宋体 </option> 


52 <option 黑体 "> 黑体 </option> 
53 <option " 幼 圆 "> 幼 圆 </option> 
54 <option "微软 雅 黑 "> 微 软 雅 黑 </option> 


"楷体 "> 楷体 </option> 


55 <option 


56 <option "隶书 "> 隶书 </option> 

57 <option "方正 姚 体 "> 方正 姚 体 </option> 

58 <option "方正 舒 体 "> 方正 舒 体 </option> 

59 <option value=" 华 文 彩云 "> 华文 彩云 </option> 

60 </select> 

61 </1i> 

62 <li class="item"> 内 容 : <input id="text_font" value=" 在 图 形 中 
写字 " maxlength=16 /></1i> 

63 <1i class="item"> 颜 色 : <input id="color font" type="color™" 
value="#0000ff" /></1i> 

64 <li class="item">X 轴 : <input id="x_ font" type="range" 
min="0" max="500" value="90" step="1" 

65 /></1i> 

66 <1li class="item">Y 轴 : <input id="y font" type="range" 

67 min="0" max="500" value="]150" step="1" /></1i> 

68 <li class="item"> 大 小 : <input id="size font" type="range" 

69 min="1" max="40" value="20" step="1" /></1i> 

70 </ul> 

3 <!-- 矩形 canvas 画布 --> 

这 入 <canvas id="canvas"></canvas> 
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7 </section> 
74 </body> 
75 <script> 
76 (function () { 
了 信人 Var canvas = document .getElementById('canvas'), 
// 获取 canvas 画 布 元 素 
78 context = canvas.getContext ("2d"), 
// 获取 canvas 元 素 上 下 文 
这 全 width canvas = document .getElementByYId('"width _ canvas')v 
// 画布 宽 
80 height canvas = document.getElementById('height canvas'), 
// 画布 长 
81 file _ img = document.getElementById('file img'), 
// 图 片 选择 
82 text_ font = document .getElementById('text font'), 
// 文字 内 容 
83 color font = document .getElementById('"color font'), 
// 文字 颜色 
84 x_ font = document .getElementById('x font'), 
// 文字 x 轴 坐标 
85 Y_font = document .getElementById('y font'), 
// 文字 Y 轴 坐标 
86 size font = document.getElementById('size font'), 
// 文字 大 小 
87 family font = document.getElementById('family font'), 
] 文字 字体 
88 img = new Image () 7 
// 新 建 图 片 元 素 实例 
89 function draw(e, x, y) { 
// 绘制 图 片 和 文字 
90 // 清空 画布 指定 矩形 区 域内 容 
Sy context.clearRect (0, 0, parseInt (canvas.width), 
parseInt (canvas.height)); 
9 canvas.width = ParseInt (width canvas.value); 
// 设置 画布 宽 
93 canvas .height = ParseInt (height canvas.value); 
// 设置 画布 高 
94 Context .drawImage (img, x || move x, y || move y); 
// 填充 图 片 到 画布 
95 context .fillstyle = color font.value; 
// 设置 文字 颜色 
96 Context .textRAlign = 'left'; 
// 设置 文字 水 平 对 齐 方式 
37 context.font = size font.value + "px " + family font.value; 
// 设置 文字 大 小 和 字体 
98 // 填充 文字 到 画布 指定 区 域 
< context .fillText (text font.value, parseInt (x font.value), 
parseInt(y font.value)); 
100 }; 
101 // 绑 定 文字 内 容 文本 框 keyup 事 件 ， 当 键盘 按键 释放 时 触发 
102 text font.addEventListener('keyup', draw, false) 7 
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// 绑 定数 值 区 域 选择 控件 change 事 件 ， 当 数值 变化 时 触发 araw 函 数 


[color font, x font, y font, size font, width canvas, 


height canvas, family font].forEach (function 


105 (item) 
106 
107 
108 
109 
110 
LLL 
了 


LL 
114 
115 


116 


L177 


118 


E13 
120 


下 2 下 


1L22 
L23 
124 
125 
126 


LT27 


L208 

2 
move_x; 

130 

13 
move_y; 

132 

133 

134 

135 


136 


137 


138 


{ 


item.addEventListener('change', draw, false); 
Fs 
// 绑 定 图 片 1oad 事 件 ， 当 图 片 加 载 完 毕 后 触发 
img.addEventListener('load', draw, false); 
// 绑 定 长 传 控件 change 事 件 ， 当 路 径 发 生变 化 时 触发 
file img.addEventListener('change', function () { 
Var files = this.files, 
// 获取 文件 列表 


reader; 


for (var i = 0, length = files.length; i < length; i++) 


if (files[i].type.toLowerCase() .match(/image.*/)) 


// 用 正则 表达 式 判 断 文件 类 型 是 否 为 图 片 类 型 
reader = new FileReader() 7 


// 实例 化 FileReader 对 象 


reader.addEventListener('load', function (e) 


// 监听 FileReader 实 例 的 load 事 件 
img.src = e.target.result; 
// 设置 图 片 内 容 

Ds; 

reader.readAsDataURL (files[i]); 

// 读 取 图 片 文件 为 dlataURL 格 式 

canvas.style.cursor = 'move'; 

// 设置 光标 为 移动 样式 


break; 


La 
}, false); 
Var move x = 0, move y= 0; 
// 临时 存储 图 片 x、Y 轴 偏 移 量 
function canvas_mousemove (e) { 
// 当 鼠 标 拖 动 图 片 时 触发 

// 计算 图 片 拖 动 后 的 x 轴 位 置 


move x = e.clientx - canvas.$mousedown x + canvas.$mouseup_ 


// 计算 图 片 拖 动 后 的 y 轴 位 置 


move y = e.clientY - canvas.$mousedown y + canvas.$mouseup_ 


// 按照 计算 后 的 坐标 位 置 重 新 绘制 图 片 和 文字 
draw(null, move x, move y); 
}; 
canvas.addEventListener('mousedown', function (e) 
// 当 单 击 画布 区 时 触发 
if (img.src.length) { 
// 判断 画布 区 内 是 否 已 经 存在 图 片 
canvas -Smousedown x = e.clientx; 
// 缓存 当前 鼠标 x 轴 坐标 


canvas -Smousedown y = e.clientYy; 


{ 


{ 


{ 


由 
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// 缓存 当前 鼠标 y 轴 坐标 


139 // 监听 画布 区 鼠标 拖 动 事件 
140 canvas.addEventListener('mousemove', canvas mousemove, 
false); 
141 ]}7 
142 }r false)y 
143 document .addEventListener('mouseup', function (e) { 
// 当 鼠 标 在 文档 内 释放 后 触发 
144 canvas.$mouseup move x = move x; 
// 缓存 拖 动 后 图 片 x 轴 坐标 
145 canvas.$mouseup move y = move_Y7 
// 缓存 拖 动 后 图 片 Y 轴 坐标 
146 // 移 除 对 画布 鼠标 拖 动 监听 事件 
147 Canvas.removeEventListener('mousemove', canvas mousemove, 
false); 
148 }, false); 
149 // 阻止 文档 内 容 选 择 事件 ， 避 免 拖 动 时 触发 内 容 选择 造成 不 便 
150 document .addEventListener('selectstart', function (e) 
{ e.preventDefault() }, false); 
EE draw(); 


// 绘制 默认 内 容 
152 HNs 
153 </script> 
154 </html> 


6.2.3 代码 分 析 


本 例 涉及 多 个 逻辑 功能 点 ， 将 代码 功能 分 成 三 大 块 进行 分 析 。 

1. 在 画布 中 显示 本 地 图 片 

代码 第 88 行 创建 一 个 图 片 实例 赋予 变量 img。 

代码 第 109 行 监听 变量 img 的 load 事 件 ， 当 图 片 的 src 属 性 发 生 改变 时 触发 函数 draw。 

代码 第 111 行 ~ 第 125 行 添加 对 上 传 控件 change 事 件 的 监听 ， 当 上 传 的 控件 值 改变 时 触发 
事件 。 

代码 第 112 行 定义 变量 fles 存 储 上 传 文件 列表 。 

代码 第 114 行 ~ 第 124 行 循环 文件 列表 ， 判 断 文件 类 型 是 否 为 图 片 类 型 。 遇 到 图 片 文件 ， 
通过 FileReader 读 取 文 件 内 容 。 当 文件 读 取 完 毕 ， 重 新 设置 变量 img 的 src 属 性 时 ， 待 图 片 加 载 
完毕 以 后 触发 函数 draw。 函 数 draw 中 绘制 图 片 方法 代码 如 下 : 


Context .drawImage (img, x || move x, y || move y); 


drawImage 语 法 如 下 : 


drawImage (image, sourceX, sourceY, sourceWidth, sourceHeight,destx, destyY, 
destWidth, destHeight) 


。 image: 所 要 绘制 的 Image 元 素 。 
。 sourceX，sourceY: 图 像 在 画布 左上 角 坐 标 位 置 。 
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。 sourceWidth, sourceHeight: 图 像 的 宽 和 高 。 
。 destX，destY: 所 要 绘制 的 图 像 区 域 的 左上 角 的 画布 坐标 。 
。 destWidth，destHeight: 图 像 区 域 所 要 绘制 的 画布 大 小 。 


杞 ”在 画布 中 绘制 图 像 必 须 在 图 像 加 载 完毕 以 后 执行 ， 即 在 图 像 的 load 事 件 回调 中 进行 ， 否 则 绘 
| 图 ”市 为 空 图 


2. 在 画布 中 写 入 文字 


函数 draw 有 两 个 功能 ， 一 个 是 绘制 图 片 ， 另 外 一 个 是 在 画布 上 写 入 文字 。 
代码 第 91 行 ， 清 空 对 应 画布 大 小 区 域 的 内 容 。 

代码 第 92 行 、 第 93 行 ， 读 取 画 布 调节 区 宽 高 滑 块 的 值 ， 重 新 设置 画布 宽 高 。 
代码 第 95 行 ~ 第 97 行 ， 分 别 设置 画布 文字 的 颜色 、 水 平 位 置 、 大 小 和 字体 。 
代码 第 99 行 ， 调 用 画布 的 fllText 方 法 写 入 文字 ，fillText 语 法 如 下 : 


context .fillText (text, x, y, maxWidth); 


。 text: 文本 内 容 。 

。 x: 相对 于 画布 的 x 轴 坐标 。 

。 y: 相对 于 画布 的 y 轴 坐标 。 

。 maxWidth: 可 选 ， 允 许 的 最 大 文本 宽度 ， 以 像素 计 。 


3， 光标 拖 动 画布 中 的 图 片 
使 用 脚本 完成 拖 动 元 素 效果 ， 首 先 要 明白 元 素 的 三 种 事件 。 


。 mousedown: 事件 会 在 鼠标 按键 被 按 下 时 发 生 。 
。 mouseup: 事件 会 在 鼠标 按键 被 松 开 时 发 生 。 
。 mousemove: 事件 会 在 秘 标 指针 移动 时 发 生 。 


本 例 实现 画布 中 图 片 拖 动 的 效果 见 代码 第 126~148 行 ， 下 面 分 析 相 关 的 代码 逻辑 。 

代码 第 126 行 ， 定 义 了 两 个 初始 化 为 0 的 变量 ， 用 于 记录 图 片 拖 动 后 的 坐标 偏 移 量 。 

代码 第 136 行 ~ 第 141 行 ， 单 击 画布 时 被 触发 。mousedown 被 触发 后 ， 先 判断 画布 中 是 否 已 
经 存在 图 片 ， 假 使 已 经 上 传 图 片 〈 即 img 变 量 的 src 属 性 不 为 空 ) ， 获 取 鼠 标 指针 位 置 相 对 于 
当前 窗口 的 x 轴 坐标 和 y 轴 坐标 ， 并 将 两 个 坐标 值 缓存 在 canvas 元 素 变量 上 。 最 后 监听 canvas 元 
素 的 mousemove 事 件 ， 绑 定 canvas_mousemove 函 数 。 

代码 第 144 行 ~ 第 147 行 ， 鼠 标 在 文档 内 松 开 时 被 触发 。mouseup 被 触发 后 ， 将 move_x， 
Imove_y 两 个 图 片 坐标 偏 移 量 缓存 在 canvas 元 素 变量 上 ， 并 将 移 除 mousedown 时 绑 定 在 canvas 元 
素 上 的 mousemove 事 件 进行 监听 。 

代码 第 127 行 ~ 第 134 行 是 完成 拖 动 效果 的 关键 。 拖 动 时 计算 图 画 和 画布 的 相对 位 置 ， 代 码 
如 下 : 


move x = e.clientX - canvas.$mousedown x + canvas.s$mouseup move x; 
move y = e-clientY - canvas.$mousedown y + canvas.$mouseup move y; 


首先 分 析 如 何 得 到 move x， 即 当前 图 片 拖 动 后 相对 于 画布 x 轴 坐标 (move_y 的 计算 方法 
与 move x 类 似 ) 。 
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。 eclientX: 拖 动 时 鼠标 指针 位 置 相 对 于 当前 窗口 的 x 轴 坐标 。 
。 canvas.$mousedown x: 拖 动 开始 时 鼠标 指针 位 置 相 对 于 当前 窗口 的 x 轴 坐标 。 
。 canvas.$mouseup move x: 上 次 拖 动 结束 后 图 片 相 对 于 画布 的 偏 移 量 ， 默 认 未 拖 动 ， 为 0。 


区 代码 分 析 并 未 包括 所 有 源码 ， 未 提 及 的 可 以 参考 代码 后 方 的 注释 。 
6.3 示例 3 在 画布 中 使 用 渐变 色 


6.3.1 示例 效果 


是 否 觉得 示例 2 的 水 印 文字 变化 过 于 单调 ， 本 例 将 在 其 基础 上 ， 运 用 Canvas 增 加 文字 渐变 
处 理 。 示 例 中 将 原来 的 “颜色 ”一 栏 变化 为 “起 始 色 ”、“ 过 渡 色 ”和 “终止 色 ”， 并 采用 
线性 渐变 以 直线 为 渐变 轴 处 理 文字 。 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.7 所 示 。 


图 6.7 使 用 Chrome 打 开 网 页 文件 


选择 “图 片 库 ” 中 的 “郁金香 jpg” 并 打开 。 调 整 画布 宽度 、 文 字 内 容 、 文 字 XY 轴 和 和文 
字 大 小 ， 效 果 如 图 6.8 所 示 。 


图 6.8 选择 图 片 并 调整 相关 设置 
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6.3.2 代码 分 析 


本 例 代码 基本 与 示例 2 相同 ， 下 面 就 不 同 部 分 做 分 析 。 
去 掉 了 原 有 的 文字 “颜色 ”控件 后 ， 新 增 了 三 个 颜色 选择 控件 ， 代 码 如 下 : 
起 点 色 : <input id="color font begin" type="color" value="#ff0000" /> 


过 渡 色 : <input id="color font middle" type="color" value="#00ff00" /> 
终点 色 : <input id="color font end" type="color" value="#400080" /> 


draw 函 数 增加 了 文字 渐变 色 处 理 ， 代 码 如 下 : 


01 function drawl(le, x, y) { 
// 绘制 图 片 和 文字 
02 // 清空 画布 指定 矩形 区 域内 容 


03 Context .clearRect (0，0，PparseInt (canvas.width), parseInt (canvas. 
height) ) > 
04 canVas .width = parseInt (width canvas.value); 
// 设置 画布 宽 
05 canvas .height = parseInt (height canvas.value); 
// 设置 画布 高 
06 context.drawImage (img, x || move x, y || move y); 


// 填充 图 片 到 画布 
07 // 创建 线性 渐变 


08 Var gradient = Context .createLinearGradient (0, 0, canvas.width, 
canvas .height) 7 
09 gradient.addColorstop("0.0", color font begin.value); 
// 在 渐变 起 点 添加 一 个 颜色 变化 
10 gradient.addColorstop("0.5", color font middle.value) 
// 在 渐变 中 间 点 添加 一 个 颜色 变化 
EE gradient.addColorstop("1.0", color font end.value); 
// 在 渐变 终点 添加 一 个 颜色 变化 
Lb context .fillstyle = gradient; 
// 用 渐变 填 色 
3 Context .textRlign = 'left'; 
// 设置 文字 水 平 对 齐 方式 
14 context.font = size font.value + "px " + family font.value; 


// 设置 文字 大 小 和 字体 
Us // 填充 文字 到 画布 指定 区 域 
16 context .fillText (text font.value, parseInt (x font.value), 
ParseInt (y font.value)); 
i 
draw 函 数 第 8 行 代码 调用 context 的 createLinearGradient 方 法 ， 该 方法 创建 一 个 线性 颜色 渐 
变 对 象 ， 渐 变 由 左上 角 到 右 下 角 线 性 进行 ， 语 法 如 下 : 


Context .createLinearGradient (xStart, yStart, xEnd, yEnd) 


。 xStart，yStart: 渐变 的 起 始点 的 坐标 
。 xEnd，yEnd: 渐变 的 结束 点 的 坐标 


代码 第 9 行 ~ 第 11 行 ， 调 用 线性 渐变 对 象 gradient 的 addColorStop 方 法 ， 分 别 在 开始 点 、 中 
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间 点 、 结 束 点 添加 对 应 颜色 ， 语 法 如 下 : 
Context .CreateLinearGradient (xStart, yStart, xEnd, yEnd) 


。 offset: 表示 渐变 的 开始 点 和 结束 点 之 间 的 一 部 分 ， 是 范围 在 0.0~1.0 之 间 的 浮 点 值 。 
。 color: 表示 指定 offset 显 示 的 颜色 。 


IE Canvas 渐 变 除 了 有 线性 渐变 外 还 有 径 向 渐变 关键 API 为 createRadialGradient) ， 读 者 有 兴趣 
下 可 以 尝试 修改 本 示例 ， 热 和 两 种 渐变 方法 的 使 用 。 


6.4 示例 4 输出 图 片 文件 


6.4.1 示例 效果 


回顾 示例 3， 已 经 具备 了 添加 图 片 、 文 字 、 渐 变色 功能 。 本 例 在 其 基础 上 ， 加 入 图 片 导 
出 功能 ， 同 时 还 可 以 选择 导出 图 片 的 类 型 和 名 称 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.9 所 示 。 


图 6.9 使 用 Chrome 打 开 网 页 文件 


在 画 框 的 左 侧 调节 框 进行 如 下 操作 : 


选择 图 片 库 中 的 “水 母 jpg” 图 片 。 
调整 画布 的 宽 高 。 

调整 文字 字体 为 “方正 舒 体 ”。 
修改 图 片 文字 内 容 为 “我 是 只 水 母 ”。 
调整 文字 在 画 框 中 的 X 轴 和 Y 轴 距离 。 
修改 下 载 区 的 文件 名 为 “水 母 ”。 


运行 效果 如 图 6.10 所 示 。 
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| 受 是 只 水 母 


6.10 选择 图 片 并 调整 相关 设置 


im 
低 


中 


二 “下 载 ” 按 钮 ， 浏 览 器 出 现 “另存 为 ”对 话 框 ， 如 图 6.11 所 示 。 


Subversion 


图 视频 
所 | 图 片 
习 文 档 
由 音乐 型 
文件 名 加 ;| 术 瑟 - mme 习 
保存 类 型 (1): [PG Insee S| 
二 让 王 件 夫 | 


图 6.11 “另存 为 ”对 话 框 


,多 读者 可 以 通过 修改 “类 型 ”下 拉 框 的 值 ， 调 整 下 载 图 片 关 型 。 本 例 一 共 提 供 了 png、jpeg、 
[ER pmp、gif 这 4 种 类 型 。 
6.4.2 代码 分 析 


本 例 代码 基本 与 示例 3 相同 ， 下 面 就 不 同 部 分 做 一 个 分 析 。 
HIML 文档 增加 了 33 个 元 素 ， 代 码 如 下 : 


QHTML 5mmr&zxthfe 


类 型 : <select id="img type"> 
<option value="png">png</option> 
<option value="jpeg">jpeg</option> 
<option value="bmp">bmp</option> 
<option value="gif">gif</option> 
</select> 
<input id="file name” value=" 默 认 " type="text" /> 
<a class="download" id="btn download" href="javascript:;"> 下 载 </a> 


在 draw 函 数 的 未 尾 增加 两 行 代码 ， 代 码 如 下 : 


btn download.setAttribute('href', canvas.toDataURL('image/' + img_ type. 
value)); 
btn download.setAttribute('download', file name.value); 


toDataURL 方 法 ， 返 回 一 张 使 用 canvas 绘 制 的 符合 data:URL 格 式 图片 。 该 方法 接收 一 个 
type 参 数 ， 表 示 为 MIME 类 型 ， 如 image/png、image/jpeg 等 。 如 果 是 image/jpeg， 可 以 有 第 二 
个 参数 ， 表 示 JPEG 的 质量 等 级 ， 范 围 在 0.0~1.0 之 间 。 


抱 ”to0DataURL 方 法 绘制 的 图 片 格式 在 各 个 浏览 器 中 的 支持 情况 不 同 。 标 准 草 案 可 以 参考 网 
le 站 http://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html#dom-canvas- 
todataurl。 


第 一 行 代码 ， 将 获取 的 图 片 值 赋 予 下 载 按钮 的 href 属 性 ， 用 于 给 下 载 提供 图 片 内 容 。 
二 行 代码 ， 设 置 A 元 素 的 download 属 性 。download 属 性 在 HTML 5 的 草案 中 被 添加 ， 
于 表明 一 个 资源 是 让 用 户 下 载 的 ， 并 且 下 载 文 件 与 ownload 属 性 值 相 同 。 
另外 增加 了 对 图 片 类 型 下 拉 框 change 事 件 的 监听 、 对 文件 名 输入 框 keyup 事 件 监听 ， 代 码 
如 下 : 
img_type.addEventListener('change'，function () {// 监听 图 片 下 拉 框 change 事 件 
btn download.setAttribute('href', canvas.toDataURL('image/' + img_ 


type.value)); 


DD); 
file name.addEventListener('keyup', function (e) { // 监听 文件 名 文本 框 按钮 松 开 事件 


btn download.setAttribute('download', file name.value); 
// 设置 下 载 A 元 素 的 download 属 性 
1D); 


6.5 示例 5 操作 图 片 像素 


6.5.1 示例 效果 


如 果 用 过 Photoshop， 会 发 现 里 面 有 多 种 针对 图 片 的 特效 ， 本 示例 将 通过 Canvas 的 接 
现 其 中 的 两 个 效果 ， 黑 白 和 逆 色 。 本 例 的 基础 功能 建立 在 示例 4 的 基础 之 上 。 


将 
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使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效 果 如 图 6.12 所 示 。 


在 图 形 中 写字 


图 6.12 使 用 Chrome 打 开 网 页 文件 


选择 图 片 库 的 “菊花 .jpg” 图 片 ， 并 对 “画布 ”、“ 文 字 ” 调 节 区 进行 设置 ，“ 特 效 ” 
区 选择 默认 的 “原始 ”， 运 行 效果 如 图 6.13 所 示 。 


图 6.13 选择 图 片 库 的 “ 殴 花 jpg” 并 调整 相关 设置 
选中 “黑白 ” 单 选项 ， 右 侧 画 布 内 容 变 为 黑白 色 ， 效 果 如 图 6.14 所 示 。 
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图 6.14 选中 “黑色 ” 单 选项 


提 _ 
| 国 玫 读者 可 以 选中 “逆反 ” 单 选 项 观察 逆反 色 的 效果 。 


6.5.2 代码 分 析 


本 例 代码 基本 与 示例 4 相同 ， 下 面 就 不 同 部 分 做 一 个 分 析 。 
HTML 文档 增加 了 “特效 ”相关 内 容 ， 代 码 如 下 ; 


<1i><h3> 特 效 </h3></1i> 
<1i class="item"> 
<input type="hidden" id="effect hidden" value="Normal" /> 
原始 : <input type="radio" checked name="effect" value="Normal" /> 
黑白 : <input type="radio" name="effect" value="BlackAndWhite" /> 
道 反 : <input type="radio" name="effect" value="Antagonistic" /> 
</1i> 


隐藏 输入 框 〈type"hidden") 用 于 暂 存 每 次 单 选项 变化 后 选中 的 值 ， 默 认为 Normal。 
在 左 侧 画 框 上 有 三 个 name 属 性 值 为 effect 的 单 选项 。 此 处 的 name 均 相同 ， 表 示 之 间 有 且 
只 能 选择 其 中 一 个 。 每 个 单 选项 的 值 都 设置 成 对 应 效果 的 英文 名 。 
当 用 户 选 择 不 同 的 单 选项 时 ， 触 发 绑 定 在 change 上 的 事件 。 回 调 函 数 先 将 获取 选中 单 选 
项 的 值 赋予 隐藏 输入 框 ， 然 后 对 右 侧 画布 进行 重新 绘制 ， 代 码 如 下 : 


Var slice = Array.prototype.slice; // 获取 数组 slice 原 型 方法 

Var effects = slice.call (document .querYySelectorRAl1l('input[name=effect]')， 
0)7 // 将 获取 的 元 素 列表 转 为 数组 

effects.forEach (function (effect) { // 循环 元 素数 组 


// 每 当 数 值 变化 触发 回调 ， 修 改 隐 藏 输入 框 的 值 ， 并 重 绘画 布 
effect.addEventListener('change', function () { 


effect hidden.value = this.value; // 设置 隐藏 输入 框 的 值 
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draw (); // 重新 绘制 画布 


查 上 面 代码 用 到 document 的 querySelectorAll 方 法 ， 方 法 在 W3C Selectors API Level 1 规范 中 定 
ee 义 ， 用 来 返回 所 有 满足 选择 器 条 件 的 元 素 列表 。CSS 选 择 器 的 规范 可 以 参考 网 站 http://www. 
w3.0rg/TR/css3-selectors/#selectors。 


在 介绍 用 draw 函 数 增加 内 容 之 前 ， 先 看 一 组 效果 方法 的 函数 集 ， 代 码 如 下 : 


01 var EFFECT = { 


02 'Normal': function (image) { }, // 原始 效果 
03 'BlackAndWhite': function (image) { // 黑白 效果 
04 var data = image.data; // 获取 画布 像素 数据 的 data 属 性 
05 for (var i = 0, 1 = data.length; i < 1; i += 4) { 
06 data[i] = data[i + 1] = data[i + 2] = parseInt((datal[i] 
+ datali + My 4 datall 4 2]) A 3)s 
07 jh 
08 context .putImageData (image, 0, 0); // 将 改变 后 图 像 数 据 放 回 画布 
09 j 
10 'Antagonistic': function (image) { // 逆 色 效果 
让 var data = image.data; // 获取 画布 像素 数据 的 data 属 性 
到 for (var i = 0, 1 = data.length; i < 1; i += 4) { 
3 data[li] = 255 - data[i]7 
14 data[i + 1] = 255 - data[i + 1] 
ITS datali + 2] = 255 = datali + 2]17 
16 }; 
ra context .putImageData (image, 0, 0); // 将 改变 后 图 像 数 据 放 回 画布 
18 
19 Ts 


Normal、BlackAndWhite、Antagonistic 这 三 个 方法 均 接受 一 个 iImage 参 数 ， 该 参数 表示 像 
素数 据 ， 数 据 类 型 为 ImageData 对 象 。image.data 表 示 像 素 的 一 维 数组 ， 数 组 的 每 个 元 素 都 分 
布 在 0~255 之 间 。 每 4 个 元 素 组 成 一 个 像素 ， 分 别 表示 红 、 绿 、 蓝 、Alpha。 

Normal 是 一 个 空 函 数 ， 不 做 任何 事情 。 

BlackAndWhite 将 图 片 转换 为 黑白 色 。 黑 白色 转换 逻辑 见 上 方 代码 第 5~7 行 ， 以 每 4 个 元 
素 为 一 节点 循环 像素 数组 。 获 取 每 次 循环 节点 的 前 三 个 数组 元 素 ， 将 其 值 重新 设置 为 三 个 元 
素 的 平均 值 。 当 循环 结束 后 ， 调 用 putImageData 方 法 将 图 像 数 据 放 回 画布 ，putImageData 方 法 
语法 如 下 : 


context .putImageData(imgData, x, y, dirtyxX, dirtyY, dirtyWidth, 
dirtyHeight) 

。 imgData: 规定 要 放 回 画布 的 ImageData 对 象 。 

。 x: ImageData 对 象 左 上 角 的 x 坐 标 ， 以 像素 计 。 

。 y: ImageData 对 象 左 上 角 的 y 坐 标 ， 以 像素 计 。 

。 dirtyX: 可 选 ， 水 平 值 x， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 。 

。 dirtyY: 可 选 ， 水 平 值 y， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 。 
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。 dirtyWidth: 可 选 ， 在 画布 上 绘制 图 像 所 使 用 的 宽度 。 
。 dirtyHeight: 可 选 ， 在 画布 上 绘制 图 像 所 使 用 的 高 度 。 


Antagonistic 将 图 片 转换 为 逆 色 ( 即 反 色 )〉。 代 码 逻 辑 见 上 方 代码 第 12 行 ~ 第 16 行 ， 算 法 
255 减 去 对 应 的 红 、 绿 、 蓝 值 ， 达 到 反 色 效果 。 

最 后 介绍 draw 函 数 增加 的 部 分 (只 有 一 行 代 码 ) ， 代 码 如 下 : 

EFFECT[effect hidden.value] .call (context, Context.getImageData(0， 

0, canvas.width, canvas.height)) 

该 行 代码 出 现在 画布 绘制 文字 与 图 片 转 Base64 数 据 之 间 。 代 码 放 于 该 位 置 ， 是 为 了 保 
证 图 片 特效 能 作用 于 画布 上 的 文字 ， 同 时 绘制 完 的 数据 能 同步 更 新 到 下 载 链 接 。 代 码 用 到 
getImageData 方 法 ， 语 法 如 下 : 


关 


imgData=context .getIimageData(x, y, width, height) 


。 x: 开始 复制 的 左上 角 位 置 的 x 坐标 。 
。 y: 开始 复制 的 左上 角 位 置 的 y 坐 标 。 
。 width: 将 要 复制 的 短 形 区 域 的 宽度 。 
。 height: 将 要 复制 的 矩形 区 域 的 高 度 。 


6.6 示例 6 制作 动画 计时 器 


> 


6.6.1 示例 效果 


本 例会 运用 前 面 示例 介绍 的 Canvas 接 口 ， 并 使 用 CSS 3 样式 制作 一 个 带 有 “开始 ”、 
“暂停 ”、“ 复 位 ”功能 的 精美 计时 器 ， 计 时 器 最 小 精度 为 毫秒 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.15 所 示 。 


图 6.15 使 用 Chrome 打 开 网 页 文件 


[ho 
会 


“开始 ”按钮 ， 计 时 器 开始 计时 ， 毫 秒 数 开始 疯狂 跳动 ， 运 行 效果 如 图 6.16 所 示 。 


图 6.16 使 用 Chrome 打 开 网 页 文件 


= 
过 
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继续 计数 。 让 


单 击 “ 暂 停 ” 按 钮 ， 计 时 器 停止 跑 动 。 


6.6.2 代码 设计 


利 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
LL 
之 
13 
14 
15 
16 
Ey 
18 
ED 
20 
21 
之 人 
23 
24 
25 
26 
2 
28 
2 
30 
3 
32 
3 
34 
35 
36 
3 
38 
3 
40 
41 
42 
43 
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员 


“开始 ”按钮 ， 计 时 器 重新 从 暂停 位 置 开始 


“复位 ”按钮 ， 计 数 器 清 零 。 这 里 不 多 做 图 示 ， 读 者 可 以 自己 动手 操作 。 


编辑 器 打开 “006. 制 作 一 个 动画 计时 器 .html” 文 件 ， 代 码 如 下 : 


<!DOCTYPE HTML> 


<html> 
<head> 
<style> 


div. 


{ 


I 


div.wraper ii 


{ 


} 


div.buttons 


{ 


wraper i A 


border: lpx solid #cccc99; 
border-radius: 1l0px; 
-moz-border-radius: 


/* 
10px; 
-webkit-border-radius: 1l0px; 
background-color: green; 

width: 333px; 

padding: 1l0px; 


六 


border: lpx solid #cccc99; 
border-radius: 1l10px; 


-moz-border-radius: 


/* 
10px; 
-webkit-border-radius: 1l10px; 
background-color: #cccc99; 

padding: S5px; 


/* 


height: 30px; 


margin: 0 auto; 
padding: 8px 0 Spx 30px; 
} 
ul.viewport 7 
{ 
border: lpx solid #cccc99; 
border-radius: 10px; 六 
-moz-border-radius: 10px; 
—webkit-border-radius: 10px; 
background-color: green; 
height: 55px; 
padding: 5px 0 0 Spx; 
margin: 0; 
} 
a.button Ke 


{ 


display: block; 


计时 器 背景 底 色 */ 


圆 角 效果 */ 


计时 器 显示 板 底 色 */ 


圆 角 效果 */ 


按钮 外 框 容器 样式 */ 


计数 显示 屏 样式 */ 


圆 角 效果 */ 


按钮 通用 样式 */ 
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44 Hoat: left; 

45 position: relative; /* 相对 定位 */ 

46 height: 25px 

47 width: 80px; 

48 margin: 0 lO0px 1l8px 07 

49 text-decoration: none; /* 去 除 相关 文本 修饰 */ 
50 font: 12Px Arial; 

三 下 font-weight: bold; 

52 line-height: 25px; 

3 text-align: center; 

54 -webkit-border-radius: 3px; /* 圆 角 效果 人 

55 -moz-border-radius: 3px; 

56 border-radius: 3px; 

3 } 

58 a.button:before, 

59 a.button:after /* 在 按钮 元 素 之 前 和 之 后 添加 样式 */ 
60 { 

61 content: ''; /* 在 元 素 上 添加 内 容 */ 
62 position: absolute; /* 绝对 定位 */ 

63 LeEt> 1pr7 

64 height: 25px; 

65 width: 80px; 

66 bottom: -lpx; 

67 -webkit-border-radius: 3px; /* 圆 角 效果 */ 

68 -moz-border-radius: 3px; 

69 border-radius: 3px; 

70 } 

了 a.button:before /* 在 按钮 元 素 之 后 添加 */ 
过 之 nl 

23 height: 23px; 

74 bottom: -4px; 

1 border-top: 07 

76 border-radius: 0 0 3px 3px; /* 圆 角 效果 */ 

J -webkit-border-radius: 0 0 3px 3px; 

78 -moz-border-radius: 0 0 3px 3px; 

79 box-shadow: 0 lpx lpx Opx #bfbfbf; /* 图 层 阴 影 效果 */ 
80 -webkit-box-shadow: 0 lpx lpx Opx #bfbfbf; 

81 -moz-box-shadow: 0 lpx lpx Opx #bfbfbf; 

82 

83 a.button:active /* 元 素 激活 ， 单 击 与 释放 之 间 样 式 */ 

84 { 

85 border: none; 

86 bottom: -4px; 

87 margin-bottom: 22px; 

88 —webkit-box-shadow: 0 lpx lpx #fff; 

89 -moz-box-shadow: 0 lpx lpx #fff; 

90 /* 添加 内 阴影 ， 让 按钮 看 上 去 感觉 已 被 按 下 */ 

引 下 box-shadow: lpx lpx 0 #fff, inset 0 lpx lpx rgba(0, 0, 0, 0.3); 
号 下 

号 3 a.button:active:before, 

94 a.button:active:after /* 元 素 激活 之 前 和 之 后 添加 样式 */ 
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85 下 

96 border: none; 

97 -webkit-box-shadow: none; /* 去 除 图 层 阴影 效 果 */ 

98 -moz-box-shadow: none; 

39 box-shadow: none; 

100 } 

101 a.green, 

102 a.green:hover, 

103 a.green:visited /* 绿色 按钮 、 悬 停 、 或 已 被 访问 的 链接 */ 

104 { 

105 color: #5d7731; 

106 border-bottom: 4px solid #799545; 

107 text-shadow: Opx lpx Opx #d5e8aa; 

108 background: #cae285; 

109 /* 线性 渐变 */ 

110 background: -webkit-gradient (linear, left top, left bottom, 
from(#cae285), to(#a3cd5a)); 

是 background: -moz-linear-gradient (top, #cae285, #a3cd5a); 

112 /* 内 阴影 */ 

133 box-shadow: inset lpx lpx 0 #cce3al; 

114 } 

二 二 .green:before, 

116 .green:after /* 在 绿色 按钮 元 素 之 前 和 之 后 添加 样式 */ 

117 ' 

118 border: lpx solid #98b85b; 

LS border-bottom: lpx solid #6d883b; 

120 } 

二 2 下 a.green:hover 

122 { 

123 background: #a3cd5a; /* 在 绿色 按钮 悬 停 添 加 样式 */ 

124 /* 线性 渐变 */ 

2 background: -webkit-gradient (linear, left top, left bottom, 
from(#a3cd5a), to(#cae285)); 

126 background: -moz-linear-gradient(top, #a3cd5a, #cae285); 

2 下 

128 </style> 

129 </head> 

130 <body> 

i <header><h2> 制 作 一 个 动画 计时 器 </h2></header> 

32 <section> 

3 <div class="wraper i"> 

134 <div class="wraper ii"> 

3 <ul class="viewport"> 

136 <1 计时 屏 一 > 

L3%n <canvas width="315" height="50"></canvas> 

138 </ul> 

139 二 扣 人 作 区 => 

140 <div class="buttons"> 

141 <a href="#" class="button green J_start"> 开 始 </a> 

142 <a href="#" class="button green J_stop"> 暂 停 </a> 

143 <a href="#" class="button green J_reset"> 复 位 </a> 
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144 </div> 
145 </div> 
146 </div> 
147 </section> 
148 </body> 
149<script> 
150 var canvas = document.querySelector('canvas')， // 获取 canvas 画 布 元 素 
151 context = canvas .getContext ("2d"), // 获取 canvas 元 素 上 下 文 
152 start = document .querySelector('a.J start'), // 开始 按钮 
153 stop = document .querySelector('a.J stop'), // 暂停 按钮 
154 reset = document .querySelector('a.J reset'); // 复位 按钮 
55 function draw(text) { // 绘制 计时 器 数字 
156 // 清空 画布 指定 矩形 区 域内 容 
157 context.clearRect (0, 0, parseInt (canvas.width), 
parseInt (canvas.height)); 

158 context .fillstyle = 'black'; // 画布 计时 器 文字 颜色 为 黑色 
159 context.font = "italic 50px sans-serif'7 // 设置 文字 字体 和 大 小 
160 Context .textBaseline = 'top'; // 设置 文本 基线 
161 context .fillText (text || '00:00:00:000', 0, 0); 

// 填充 文字 到 画布 指定 区 域 
162 }; 
163 var start time, // 单 击 开始 时 间 
164 time_spend, // 时 差 (毫秒 ) 
165 time_ stop = 0, // 停顿 时 的 时 差 〈 毫 秒 ) 
166 interval; // 轮 询 变 量 
167 function runtime() { 

// 计算 时 差 ， 返回 指定 格式 时 间 hh :MM: ss:sss 

168 time_ spend = (new Date() - start time + time stop) || 0; 

// 时差， 默认 为 0 
169 Var hour, minute, second, millisecond, 
170 temp_ time spend = time spend; // 临时 变量 ， 存 放 的 是 差 值 
3 millisecond = temp time spend % 1000; // 取 1000 的 模 获 取 毫 秒 
172 temp time spend = parseInt (temp time spend / 1000); 

// 获取 剔除 毫秒 后 的 秒 
173 second = temp time spend % 60; // 取 60 的 模 获取 秒 
174 temp_time spend = (temp time spend - second) / 60; 

// 获取 剔除 秒 后 的 分 
175 minute = temp time spend % 60; // 取 60 的 模 获取 分 
176 hour = (temp time spend - minute) / 60; // 获取 剔除 分 后 的 小 时 
177 second = second < 10 ? ('0' + second) : second; // 不 足 2 位 补 0 
178 minute = minute < 10 ? ('0' + minute) : minute; 
179 hour = hour < 10 ? ('0! + hour) : hour; 
180 return [hour, minute, second, millisecond] .join(':'); 
181 
182 start.addEventListener('click'，function (e) { // 开始 按钮 单 击 事件 
183 e.preventDefault () 7 // 禁止 a 链 接 默认 事件 
184 En war 0 
185 start time = new Date(); 
186 interval = setInterval (function () { // 每 10ms 执 行 一 次 
187 draw (runtime ()); // 获取 对 应 的 计数 并 绘制 
188 }, 10); 


280 


和 第 6 章 Canvas 图 本 大 演练 


189 }; 
190 }, false); 
191 stop.addEventListener('click', function (e) { // 暂停 按钮 单 击 事件 
192 e.preventDefault (); 
193 time stop = time spend; // 缓存 停止 时 候 的 时 差 
194 clearInterval (interval); 
195 interval = null; 
196 }, false); 
197 reset.addEventListener('click'，function (e) { // 复位 按钮 单 击 事件 
198 e.preventDefault (); 
199 time stop = 0; // 清 零 时 差 
200 ClearInterVal (interval); 
201 interval = null; 
202 draw (); // 绘制 默认 计数 
203 }, false); 
204 draw(); 
205 </script> 
206</html> 
6.6.3 代码 分 析 
1. 分 析 样式 


代码 第 5 行 ~ 第 40 行 ， 分 别 定 义 了 外 框 背 景 、 计 时 器 背景 板 、 计 时 器 视窗 、 按 钮 面板 4 大 


样式 类 。 


均 运用 了 CSS 3 的 圆 角 效果 ， 样 式 关键 字 : border-radius。 


代码 第 41 行 ~ 第 127 行 ， 定 义 了 按钮 的 基础 样式 类 和 绿色 样式 类 ， 运 用 了 多 种 伪 类 效果 。 


CSS 中 的 


伪 类 主要 用 于 向 某 些 选择 器 添加 特殊 的 效果 ， 下 面 罗 列 了 示例 中 出 现 的 伪 类 。 


:before: 在 元 素 内 容 的 最 前 面 插入 生成 内 容 。 

:after: 在 元 素 内 容 的 最 后 面 插入 生成 内 容 。 

:active: 激活 状态 的 元 素 添加 样式 ， 如 单 击 按钮 与 释放 之 间 。 
:active:before: 元 素 被 激活 前 插入 生成 内 容 。 

:active:after: 元 素 被 激活 后 插入 生成 内 容 。 

:hover: 当 息 标 悬 停 在 元 素 上 。 

:Visited: 已 经 被 访问 的 链接 。 


除了 文中 提 到 的 CSS 擅 类 以 外 ， 还 有 大 量 的 其 他 类 型 伪 类 在 日 常 的 开发 中 被 使 用 。CSS 伪 类 
的 应 用 极 大 地 简化 了 代码 逻辑 的 复杂 度 ， 相 信 CSS 未 来 的 版 本 会 继续 对 伪 类 进行 加 强 。 想 了 
解 更 多 的 伪 类 使 用 ， 可 以 参考 网 站 http://www.w3schools.comycss/css_pseudo_classes.asp。 


2. 分 析 肢 本 代码 逻辑 


代码 第 150 行 ~ 第 154 行 ， 从 文档 中 获取 需要 操作 的 元 素 。 
代码 第 155 行 ~ 第 162 行 ， 在 画布 上 绘制 传 入 的 字符 串 ， 这 块 代码 在 前 面 的 示例 中 已 经 多 


次 出 现 ， 


如 果 有 疑惑 可 以 参考 代码 后 方 注释 。 


代码 第 163 行 ~ 第 166 行 ， 声 明 用 于 计数 相关 的 中 间 变 量 。 
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代码 第 167 行 ~ 第 181 行 ， 定 义 了 关键 的 计时 函数 runtime。 第 168 行 代码 计算 计时 器 跑 过 
的 时 间 ， 单 位 以 毫秒 计 。 原 理 是 将 当前 时 间 减 去 单 击 “开始 ”时 刻 的 时 间 ， 然 后 加 上 被 单 击 
“暂停 ”按钮 之 前 跑 过 的 时 间 。 函 数 的 后 面部 分 是 将 得 到 的 总 毫秒 数 进 行 格式 转换 ， 返 回 一 
个 类 似 于 “小 时 : 分 钟 ， 秒 : 毫秒 ”的 字符 串 。 

代码 第 182 行 ~ 第 190 行 ， 给 “开始 ”按钮 的 单 击 事件 绑 定 监听 。 当 用 户 单 击 按钮 时 ， 先 
判断 计数 器 是 否 已 经 启动 。 如 果 未 启动 ， 则 记录 当前 单 击 的 时 间 ， 并 以 10ms 为 一 周期 执行 
runtime 函 数 并 绘制 结果 。 

代码 第 191 行 ~ 第 196 行 ， 给 “暂停 ”按钮 的 单 击 事件 绑 定 监听 。 当 用 户 单 击 按钮 时 ， 用 
变量 time_stop 记 录 计 数 器 当前 走 过 的 时 间 ， 然 后 停止 周期 调用 函数 。 

代码 第 197 行 ~- 第 203 行 ， 给 “复位 ”按钮 的 单 击 事件 绑 定 监 听 。 当 用 户 自 
置 所 有 变量 ， 并 重新 绘制 默认 计数 器 视图 。 


低 


击 按钮 时 ， 习 
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6.7 示例 7 在 画布 中 莫 贴 图 像 


6.7.1 示例 效果 


在 很 多 社交 网 站 上 能 看 到 这 样 的 场景 ， 用 户 上 传 自 定义 头像 ， 并 对 其 进行 编辑 保存 。 多 
数 网 站 都 实现 了 图 像 编辑 功能 ， 采 用 的 是 Flash 技 术 。 本 例 将 采用 HIML 5 技术 实现 此 场景 ， 
具备 上 传 图 片 和 简单 的 剪贴 功能 。 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.17 所 示 。 


直选 择 文 件 


原画 布 目标 画布 


图 6.17 使 用 Chrome 打 开 网 页 文件 


单 击 “ 选 择 文件 ”按钮 ， 在 图 库 中 选择 Einstein png 图 片 并 打开 ， 效 果 如 图 6.18 所 示 。 
在 人 物 的 头 部 左上 方 按 住 鼠标 左 键 ， 并 沿 着 右 下 方 拖 动 ， 出 现 一 个 虚线 框 。 虚 线 区 域 中 
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将 被 剪贴 到 右 侧目 标 画 布 中 ， 效 果 如 图 6.19 所 示 。 松 开 鼠 标 左 键 ， 原 画布 虚线 框 内 的 爱 因 斯 
坦 头像 被 复制 到 右 侧目 标 画 布 ， 效 果 如 图 6.20 所 示 。 


图 6.18 单 击 “ 选 择 文件 ”按钮 并 打开 图 片 


Einstein.png Einstein png 


图 6.19 单 击 并 拖 动 图 6.20 松 开 鼠标 左 键 ， 头 像 被 截取 


6.7.2 代码 设计 
利用 编辑 器 打开 “007. 在 画布 中 剪贴 图 像 html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 


02 <html> 

03 <head> 

04 <style> 

05 Q@-webkit-keyframes bluePulse { /* 蓝 色 内 动 动画 */ 

06 from { background-color: #007d9a; -webkit-box-shadow: 
OD Spx #333 } 

07 50% { background-color: #2daebf; -webkit-box-shadow: 
0 0 18px #2daebf; } 

08 to { background-color: #007d9a; -webkit-box-shadow: 
oO 0 Spz #4333 } 

09 | 
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10 .button { /* 上 传 按钮 样式 */ 
it J oe 省 略 部 分 样式 代码 
下 人 -webkit-animation-name: bluePulse; /* 设置 执行 动画 名 称 */ 
3 -webkit-animation-duration: 2s; /* 动画 一 周期 的 时 间 */ 
14 -webkit-animation-iteration-count: infinite; /* 无 限 次 的 循环 播 
放 动画 */ 
15 } 
16 Ce 此 处 省 略 部 分 样式 代码 ， 请 参考 光盘 源 代码 
I 六 </style> 
18 </head> 
19 <body> 
20 <header><h2> 在 画布 中 剪贴 图 像 </h2></header> 
21 <section> 
22 <!-- 图 片 按钮 上 传 --> 
23 <input type="file" class="button"/> 
24 <!-- 原画 布 --> 
25 <canvas id="J canvas i" width="250" height="300"></canvas> 
26 <!-- 目标 画布 --> 
2 <canvas id="J canvas ii" width="150" height="200"></canvas> 
28 </section> 
29 </body> 
30 <script> 
号 var canvas i = document.getElementById('J canvas i'), 
// 获取 canvas 画 布 元 素 
32 context i = canvas i.getContext ("2d"), 
// 获取 canvas 元 素 上 下 文 
3 canvas _ ii = document.getElementById('J canvas ii'), 
// 获取 目标 canvas 画 布 元 素 
34 context ii = canvas ii.getContext ("2d"), 
// 获取 目标 canvas 元 素 上 下 文 
| input file = document .querySelector('input [type=file] '), 
// 按 上 传 按钮 
36 clip wraper = document.createElement ('div'), 
// 自 创建 剪贴 框 元 素 
37 img = new Image(); // 新 建 图 片 元 素 实例 
38 clip wraper.setAttribute('class', 'clip'); // 设置 剪贴 框 样式 
39 function draw() { // 绘制 上 传 图 片 
40 // 清空 原画 布 指定 矩形 区 域内 容 
41 context i.clearRect(0, 0, parseInt (canvas i.width), 
ParseInt (canvas i.height)); 
42 // 清空 目标 画布 指定 矩形 区 域内 容 
43 context ii.clearRect(0, 0, parseInt (canvas ii.width), 
parseInt (canvas ii.height)); 
44 context i.drawImage (img, 0, 0); // 填充 图 片 到 画布 
45 这 
46 // 获 取 或 设置 元 素 样式 。 参 数 1 为 目标 元 素 ; 参数 2 如 果 为 字符 则 获取 样式 ， 如 果 为 对 象 
则 设置 元 素 样式 
47 function css (element， options) { 
48 if (typeof options === "string'") { return element. 


style[options]; 
49 } else { 
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50 


5 
52 
53 


54 


9 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 


67 
68 
69 
70 
HE 
2 


多 
74 
75 


76 
ya} 
78 


U2 
80 


81 
82 


83 
84 


85 
86 


87 
88 


for (var name in options) {element.style[name] 
= Options [name]7 
及 
}; 
img.addEventListener('load', draw, false); 
// 监听 图 片 的 加 载 完 毕 事件 
input file.addEventListener('change', function () { 


// 上 传 按钮 值 改 变 事 件 


yA 此 处 省 略 部 分 代码 ， 请 参考 光盘 源 代码 
}, false); 
var start x = 0, start y= 0, // 单 击 的 x 轴 和 Y 轴 坐标 位 置 
move x = 0, move y= 0, // 单 击 后 移动 的 相对 距离 
offset xy = 6; // 剪贴 框 距 鼠 标的 相对 位 置 
function canvas_mousemove (e) { // 鼠标 移动 事件 函数 


// 鼠标 移动 时 屏幕 位 置 减 去 单 击 时 位 置 获取 鼠标 移动 的 相对 距离 
move x = e.clientX - start x; move y = e.clientY - start y; 
if (move x > 0 && move y > 0) { // 鼠标 往 右 下 方 移动 
css(clip wraper, { 
"width': move x + 'px', "height': move y + 'px', 
topts (start Vy offsetexy TT MrT ert (tart 
OFEoeb ry DR 
} 
We 此 处 省 略 鼠 标 往 右 上 、 左 下 、 左 上 移动 的 代码 ， 请 参考 光盘 源 代码 
// 监听 剪贴 框 鼠 标 移动 事件 
clip wraper.addEventListener('mousemove', canvas mousemove, false); 
canvas i.addEventListener('mousedown', function (e) { 
// 监听 原画 布 单 击 事件 
css(clip wraper, { 
// 获取 单 击 时 的 屏幕 位 置 ， 设 置 剪 贴 框 样式 ， 并 临时 存放 到 变量 中 
lerftvs (start x = (eclientk -oFfset ery) + VPR 
"top": (start y= (eclientY - offset xy)) + "px"r 
rth "Lx Mointe LDR 
]) 2 
document .body.appendchild(clip wraper); 
// 将 剪贴 框 添加 到 DOM 文档 内 
// 监听 原画 布 的 鼠标 移动 事件 ， 绑 定 canvas_mousemove 函 数 
canvas i.addEventListener('mousemove', canvas mousemove, 
false); 
}, false); 
document .addEventListener('mouseup', function (e) { 
// 当 鼠 标 在 DOM 文 档 内 释放 后 触发 ; 
// 移 除 原画 布 的 鼠标 移动 事件 
canvas i.removeEventListener('mousemove', canvas mousemove, 
false); 
if (e.target.nodeName.toLowerCase() == 'canvas’' && 
move x > offset xy && move y > offset xy && 
// 移动 的 相对 距离 必须 超过 预 设 距 离 
img.src.length > 0 // 判断 是 否 已 经 上 传 图 片 
Wet 
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89 Var SOuUTCeX = parseInt (css (clip wraper， ‘left')) - canvas 
i.offsetLeft, 

90 sourceY = parseInt (css(clip wraper, 'top')) - canvas 
i.offsetTop, 

9 destWidth = parseInt (canvas ii.width), destHeight = 
ParseInt (canvas ii.height); 

Ep4 context ii.clearRect(0, 0, destWidth, destHeight); 

// 清空 目标 画布 内 容 
93 // 填充 图 片 到 画布 
94 context ii.drawImage (img, sourceX, sourceY，Math.abs (move_ 


zx), Math.abs (move y), 0, 0, 
95 destWidth, destHeight); 


96 ] 7 

97 try { document.body.removeChild(clip wraper); } catch (e) { }7 
// 从 DoM 文 档 中 移 除 剪贴 框 

98 }, false); 

99 // 阻止 文档 内 容 选 择 事件 ， 避 免 拖 动 时 触发 内 容 选择 造成 不 便 

100 document .addEventListener('selectstart', function (e) 


{ e.preventDefault() }, false); 
101 </script> 
102 </html> 


6.7.3 代码 分 析 


首先 看 代码 第 05 行 ~ 第 09 行 ， 使 用 了 CSS 3 的 “@keyframes” 创 建 了 一 个 动画 。 示 例 | 
使 用 “@-webkit-keyframes”， 表 示 只 适用 于 WebKit 内 核 的 浏览 器 。“@-webkit-keyframes” 
后 方 紧 跟 的 标识 符 表示 动画 的 名 称 ， 大 括号 内 为 动画 的 过 程 。 关 键 词 fom 和 to， 等 同 于 0% 和 
100%， 以 上 的 代码 等 同 于 如 下 代码: 
@-webkit-keyframes bluePulse { 
0% { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; 


十 


50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px 
#2daebf; } 
100% { background-color: #007d9a; -webkit-box-shadow: 0 0 9px 
#333; } 
} 


样式 类 button 中 使 用 了 定义 的 bluePulse 动 画 ， 代 码 如 下 : 


. buttont{ 


-webkit-animation-name: bluePulse; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 


。 -webkit-animation-name: 动画 名 。 
。 -webkit-animation-duration: 完成 一 个 周期 所 花费 的 秒 数 ， 默 认 是 0。 
。 -webkitanimation-iteration-count: 动画 被 播放 的 次 数 ， 默 认 是 1， 示 例 中 infinite 表 示 无 限 。 
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甘 s CSS 3 动画 还 提供 其 他 丰富 的 属性 ， 想 了 解 更 多 内 容 可 以 浏览 网 址 http://www.w3school.com. 


cn/css3/css3_animations.asp。 


接着 分 析 脚 本 逻辑 的 关键 部 分 ， 其 余部 分 读者 可 以 参考 代码 后 方 注释 。 
代码 第 39 行 ~ 第 45 行 定义 函数 draw， 作 用 是 在 原画 布 绘制 上 传 图 片 ， 并 清空 目标 画布 


内 容 。 
代码 第 47 行 ~ 第 52 行 定义 函数 css， 封 装 了 一 个 简单 设置 和 获取 元 素 样式 的 方法 ， 没 有 过 
多 的 对 浏览 器 兼容 性 做 处 理 ， 读 者 可 以 使 用 第 三 方 类 库 〈 如 jQuery) 替代 该 临时 方法 。 

代码 第 57 行 ~ 第 59 行 定 了 5 个 变量 ， 说 明 如 下 。 

。 start x，start y: 记录 用 户 单 击 时 在 浏览 器 上 的 坐标 。 

。 move x，move y: 记录 单 击 后 在 原画 布 移动 的 相对 距离 。 

。 offset xy: 预 设 和 鼠标 离 虚线 剪贴 框 的 距离 。 


代码 第 60 行 ~ 第 69 行 定义 函数 canvas_mousemove， 为 虚线 剪贴 框 运行 拖 动 的 核心 函数 。 
首先 ， 计 算 获 得 单 击 后 移动 的 相对 距离 ， 然 后 根据 坐标 轴 的 4 个 区 间 ， 分 成 左上 、 左 下 、 右 
上 、 右 下 4 个 方向 。 通 过 判断 移动 距离 的 正 负 关 系 ， 即 能 得 到 鼠标 的 移动 方向 ， 最 后 设置 虚 
线 剪贴 框 的 样式 。 

代码 第 72 行 ~ 第 81 行 ， 监 听 原 画布 的 mousedown 事 件 。 用 户 在 原画 布 单 击 后 ， 在 DOM 文 
档 内 插入 一 个 宽 高 为 px 的 DIV 元 素 表示 剪贴 框 ， 并 添加 对 原画 布 mousemove 事 件 的 监听 ， 监 
听 函 数 为 canvas_mousemove。 

代码 第 82 行 ~ 第 98 行 监听 DOM 文 档 的 mouseup 事 件 。 鼠 标 松 开 后 ， 移 除 绑 定 在 目标 画布 
mousemove 事 件 上 的 canvas_mousemove 函 数 ， 防 止 多 次 绑 定 。 通 过 if 条 件 过 小 后 ， 计 算 和 矩形 虚 
线 剪 贴 框 左上 角 相 对 于 原画 布 的 距离 《像素 计 ) ， 然 后 调用 目标 画布 drawImage 方 法 ， 在 目标 
画布 上 绘制 剪贴 图 片 。 


的 _ 
I 国 下 drawImage 方 法 使 用 可 以 参考 本 章 示例 2。 


6.8 示例 8 实现 相片 的 360” 旋转 特效 


6.8.1 示例 效果 


在 示例 7 中 ， 已 经 实现 了 截取 上 传 图 像 指 定 区 域 的 功能 。 本 例 将 加 入 对 截取 后 图 像 的 
360” 旋转 功能 ， 用 户 可 以 轻松 对 图 像 进行 4 个 方向 的 旋转 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 目 标 画 布下 方 比 示例 7 多 出 一 个 旋转 按钮 ， 运 行 效果 
如 图 6.21 所 示 。 
单 击 “ 选 择 文件 ”按钮 ， 在 图 库 中 选择 “Einstein-180.png” 图 片 并 打开 ， 该 图 片 是 
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Einstein.png 的 180” 旋 转 图 ， 效 果 如 图 6.22 所 示 。 使 用 鼠标 截取 原画 布 “ 爱 因 斯 坦 ” 的 头 部 ， 
此 时 原画 布 与 目标 画布 图 像 均 是 倒立 的 ， 效 果 如 图 6.23 所 示 。 双 击 “ 旋 转 ” 按 钮 ， 进 行 两 次 
90” 目标 图 片 旋转 ， 效 果 如 图 6.24 所 示 。 


| 选择 文件 上 二 :之 4 Einstein-180.png 
原画 布 目标 画布 
5 
图 6.21 使 用 Chrome 打 开 网 页 文件 图 6.22 单 击 “选择 文件 ”按钮 并 打开 图 片 


Einstein-180.png Einstein-180.png 


图 6.23 单 击 “ 选 择 文件 ”按钮 并 打开 图 片 图 6.24 双击 “旋转 ”按钮 


6.8.2 代码 分 析 


本 例 代 码 多 数 与 示例 7 相同 ， 不 同 部 分 主要 集中 在 处 理 图 片 旋 转 的 脚本 逻辑 ， 下 面 就 这 
部 分 做 一 个 分 析 ， 代 码 如 下 : 


01 var rotation ii = document.getElementById('J rotation ii'), 


02 rotation_ angle = [0, 90, 180, 270], // 4 个 方向 的 变化 角度 

03 temp_image = new Image () 7 // 临时 目标 画 框图 片 

04 rotation ii.addEventListener('click', function () { 

05 if (!temp image.src.length) { 

06 return; 

07 |s 

08 var RANGLE KEY NAME = "data-angleindex'， // 缓存 在 按钮 元 素 上 的 属性 名 称 

09 // 获取 当前 索引 数 

10 angle_index = ParseInt (rotation ii.getAttribute (ANGLE KEY 
NAME)) 11 0， 
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于 width = ParseInt (canvas ii.width), 
生变 height = parseInt (canvas ii.height), 
13 drawX, 
14 drawY; 
15 angle index++; // 计数 加 1， 用 于 下 轮 单 击 
16 if (angle index === rotation _ angle-length) { // 进入 新 的 轮 询 
下 angle index = 07 
18 过 
19 switch (angle_index) { // 获取 目标 画 框 绘制 的 坐标 
20 case 0: drawX = drawY = 0; break; // 正 位 
2 case 1: drawX = 0; drawY = -height; break;  // 顺 时 针 90° 
22 case 2: drawX = -width; drawY = -height; break; // 顺 时 针 180° 
2 case 3: drawX = -width; drawY = 0; break; // 顺 时 针 270° 
24 ] 7 
25 context ii.clearRect(0, 0, width, height); 
26 context ii.save(); 
pa context ii.rotate(rotation angle[angle index] * Math.PI / 180); 
28 context ii.drawImage (temp image, drawX, drawY); 
29 context ii.restore(); 
30 rotation ii.setAttribute (ANGLE KEY NAME, angle index); 
// 将 计数 写 入 按钮 属性 
3 Ps 


代码 第 02 行 ， 定 义 变量 rotation_angle， 用 于 存储 图 片 旋转 的 4 个 角度 值 。 

代码 第 03 行 ， 定 义 变量 temp_image， 存 放 一 个 Image 的 实例 。 该 图 片 实例 的 src 属 性 会 在 
每 次 截取 图 片 完 毕 后 被 赋值 ， 代 码 如 下 : : 

document .addEventListener('mouseup', function (e) { 


Wr 省 略 ， 详 见 本 书 网 络 资源 


temp_image.src = canvas ii.toDataURL(); 
]) 7 


代码 第 05 行 ~ 第 07 行 ， 判 断 目 标 temp_image 的 src 属 性 是 否 为 空 ， 即 判断 目标 画布 是 否 被 
绘制 内 容 。 如 果 没有 被 绘制 ， 则 不 继续 往 下 走 。 
在 计算 图 片 左上 角 位 置 之 前 ， 先 了 解 Canvas 的 rotate 方 法 ， 方 法 语法 如 下 : 


context .rotate (angle) 


// angle 表 示 旋转 的 量 ， 用 弧度 表示 。 正 值 表 示 顺 时 针 方 向 旋转 ， 负 值 表示 逆 时 针 方向 旋转 
rotate 方 法 旋转 效果 如 图 6.25 所 示 。 


图 6.25 rotate 方 法 旋转 效果 
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代码 第 19 行 ~ 第 24 行 给 出 了 计算 4 种 变化 对 应 的 图 片 左上 角 位 置 值 。 
片 的 逻辑 中 ， 还 需要 特别 注意 以 下 两 个 关键 方法 。 

。 save: 把 当前 状态 的 一 份 持 贝 压 入 到 一 个 保存 图 像 状态 的 栈 中 。 

。 restore: 从 栈 中 弹出 存储 的 图 形状 态 并 恢复 画布 对 象 的 属性 、 剪 切 路 径 和 变换 矩阵 的 值 。 


在 旋转 图 


6.9 示例 9 一 个 HTML 5 版 销售 数据 图 表 


6.9.1 示例 效果 


数据 可 视 化 是 将 数据 以 图 像 的 形式 表现 出 来 ， 图 表 在 其 中 具有 非常 核心 的 地 位 。 常 见 的 图 


表 有 柱 形 图 、 折 线 图 、 饼 图 、 条 形 图 、 雷 达 图 等 。 本 例 采 用 柱 形 图 方式 展现 销售 数据 信息 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 页 面 直接 绘制 出 一 张 柱 形 图 表 ， 运 行 效果 如 图 6.26 所 示 。 


金额 ( 亿 ) 


6.9.2 代码 设计 
利用 编辑 器 打开 “009. 一 个 HTML 5 版 销售 数据 图 表 html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE HTML> 


个 


图 6.26 使 用 Chrome 打 开 网 页 文件 


02 <html> 

03 <body> 

04 <header><h2> 一 个 HTML 5 版 销售 数据 图 表 </h2></header> 

05 <section 

06 <!-- 柱 形 图 --> 

07 <canvas id="chart" width="600" height="420"></canvas> 
08 </section> 
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全 |HTML 5 网 页 开发 实 列 详 外 


攀 
[el 本 示例 通过 3G 网 络 访问 ， 需 要 通过 Web 服 务 器 来 访问 网 页 文件 。 


使 用 Google 地 图 追踪 用 户 的 位 置 
当前 地 理 位 置 当 前 位 置 (纬度 : 30.301720086256744， 经 度 : 


Xi 


120.29849378345972) 


图 8.21 在 iPhone 4S 上 用 Safari 浏 览 器 打开 文件 


移动 当前 位 置 ， 行 走 一 段 距离 ， 随 着 移动 过 程 中 ，Google 地 图 上 会 画 出 其 移动 轨迹 ， 如 
图 8.22 所 示 。 


所 _ 
| 国 未 可 以 通过 开 千 或 者 坐 公 共 交 来 移动 当前 位 置 ， 效 果 更 佳 。 


使 用 Google 地 图 追踪 用 户 的 位 置 


当前 地 理 位 置 当 前 位 置 (纬度 : 30.301997659223108， 经 度 : 
120.31201474153198) 


图 8.22 移动 过 程 中 
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8.8.2 代码 设计 


利 


编辑 器 打开 “用 户 自 定义 的 地 理 定位 .html” 文 件 ， 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 


09 
10 
EE 
12 


13 
14 
15 
16 
EE 
18 
到 
20 
2 
2 
23 
24 
25 
26 


27 


28 
2 
30 
党 
32 


33 
34 
35 


36 
37 


38 
39 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 使 用 Google 地 图 追踪 用 户 的 位 置 </title> 
<style> 
body{ 
margin:50px auto;width:634px;padding:20px;border:1px 
solid #c88e8e; 
border-radius: 15px; 
height: 100%; /* 设置 高 度 自 适应 */ 
} 
#map{ height: 400px; width: 630px; text-align: center;} 
/* 设置 地 图 宽 高 */ 
</style> 
</head> 
<body> 
<p> 使 用 Google 地 图 追踪 用 户 的 位 置 </p> 
<p> 当 前 地 理 位 置 <span id="info"></span></p> 


<div id="map"> 加 载 中 . . .</div> <!-- 地 图 显示 控件 --> 
</body> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
7 (function(){ 
var 
gmap = document .getElementById ("map"), // 获取 地 图 DoM 
ginfo = document .getElementById ("info"), // 获取 显示 经 纬度 DoM 


chinapos = new google.maps.LatLng(35.86166, 104.195397), 
// 设置 默认 为 中 国 地 图 坐标 

map = new google.maps.Map (document .getElementById("map"), { 
// Google 地 图 实例 化 

zoom: 5, 

center: chinapos, 

mapTYypeId: google.maps.MapTypeId.ROADMAP 
by 
marker = new google.maps.Marker ({position: chinapos, map: map, 


title: "用 户 位 置 "})， // 地 图 浮动 提示 
watchMap = function(position) { 
var 


pos = new google.maps.LatLng (position.coords.latitude, 
position.coords.longitude); // 经 纬度 
ginfo.innerHTML = "当前 位 置 (纬度: " + position.coords.latitude 
+ "， 经 度 : " + position.coords. 
longitude + ") "; // 显示 定位 结果 
map.setCenter (pos); 
map.setZzoom(14); 
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40 marker.setPosition (pos); // 更 新 位 置 标记 
41 drawPath (position.coords); // 根据 当前 经 纬度 画 线 
2 
43 drawPath = function(){ // 画 线 函数 
44 Var 
45 coordinatesPathRrray = []， // 所 监听 到 的 所 有 经 纬度 信息 
46 lineoption = { // 画 线 的 配置 选项 
47 strokeColor: "#9290f8", // 线 的 颜色 
48 strokeOpacity: 0.5, // 线 的 透明 度 
49 strokeWeight: 5 // 线 的 精细 
50 jy 
5 coordsPath; // 保存 Polyline 的 变量 
52 var draw = function(coords){ // 重 绘 函数 
53 coordsPath .setMap (nul1) 7 // 清除 原 有 的 线 
54 // 把 新 的 位 置信 息 加 入 到 数组 中 
光村 coordinatesPathArray.push (new google.maps.LatLng (coords. 
latitude, coords.longitude)); 
56 lineOption.path = coordinatesPathArray; 
// 线 的 path 配 置 选项 
3 coordsPath = new google.maps.Polyline(lineOption); 
// 利用 Google API 夯 线 
58 coordsPath.setMap (map); // 在 地 图 上 显示 出 线 
59 } 
60 lineOption.path = coordinatesPathArray; // 初始 化 第 一 条 线 
61 coordsPath = new google.maps.Polyline (lineOption); 
// 初始 化 Polyline 并 赋值 给 coordsPath 
62 return draw; 


63 }()， 
64 updatePosition = function(){ 


65 var 

66 errorHandler = function(error){ // 定位 出 错 处 理 函数 

67 Switch (error.code){ 

68 case error.PERMISSION DENIED: // 定位 失败 ， 没 有 权限 

69 gmap.innerHTML = "定位 被 阻止 ， 请 检查 您 的 授权 或 者 网 
络 协议 (" + error.message + ")"; 

70 break; 

了 case error.POSITION UNAVAILABLE: // 定位 失败 ， 不 可 达 

2 gmap .innerHTML = "定位 暂时 无 法 使 用 ， 请 检查 您 的 网 
络 (" + error.message + ")"; 

3 break; 

74 case error.TIMEOUT: // 定位 失败 ， 超 时 

75 gmap .innerHTML = "对 不 起 ， 定 位 超时 "; 

// 超时 了 

76 break; 

了 7 

78 ]， 

了 3 getWatchPosition = function(){ // 定位 函数 

80 Var watchId = navigator.geolocation.watchPosition (watchMap, 


errorHandler, {timeout: 1000}); 
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81 jj 
82 return getWatchPosition; // 返回 定位 函数 供 外 部 调用 
83 ]()7 
84 if (navigator.geolocation) { 
85 gmap.innerHTML = "定位 中 ..."; 
86 updatePosition(); // 定位 开始 
87 } else { 
88 gmap.innerHTML = "您 的 浏览 器 不 支持 地 理 位 置 ~0(N_N)o~'s; 
// 定位 失败 ， 浏 览 器 不 支持 
89 } 
90 10); 
91 </script> 
92 </html> 
8.8.3 代码 分 析 


第 40 行 ， 作 用 是 在 用 户 移动 过 程 中 ， 重 新 标记 用 户 的 当前 位 置 。 


第 41 行 ， 调 用 画 线程 序 。Google 提 供 的 画 线 API Polyline 会 在 两 点 间 画 出 一 条 直线 。 根 据 


用 户 频繁 的 移动 位 置 ， 形 成 多 个 点 ， 把 每 个 点 连接 ， 就 成 了 一 条 直线 。 


第 43 行 ~ 第 63 行 ， 画 线 函 数 。 首 先 把 画 线 的 变量 保存 在 闭 包 中 ， 注 意 第 62 行 代码 ， 该 函 
数 会 在 页 面 载 入 时 立即 执行 ， 并 初始 化 coordinatesPathArray、lineOption、coordsPath 这 三 个 变 


量 ， 第 61 行 返回 draw 函 数 。 


第 52 行 ~ 第 59 行 ， 定 义 真正 的 画 线 函 数 draw， 第 40 行 调用 的 drawPath 函 数 实际 上 调用 


的 是 


drawp 函 数 。 传 递 的 参数 为 当前 的 坐标 。draw 函 数 的 原理 是 先 清除 原先 已 经 画 的 轨迹 ， 再 把 
当前 的 位 置 坐标 加 入 到 历史 坐标 数组 coordinatesPathArray 中 ， 最 后 根据 新 的 数组 ， 在 Google 


Map 上 重新 绘制 一 条 轨迹 。 
第 53 行 ， 清 除 当前 地 图 上 已 经 画 好 的 路 径 轨迹 。 
第 55 行 ~ 第 57 行 ， 把 当前 新 的 位 置 坐标 数组 在 Google Map 上 重新 绘制 出 来 。 


IE 更 多 关于 通过 Google Map 画 线 的 知识 点 ， 请 参考 Google 官 方 网 站 https://developers.google. 


com/maps/documentation/javascript/reference#Polyline。 


代码 第 86 行 是 本 示例 的 入 口 函数 ， 该 函数 调用 getWatchPosition 方 法 ， 然 后 执行 


navigation.geolocation 对 象 的 watchPosition 方 法 。 


第 80 行 ， 调 用 HTML 5 Geolocation API 的 watchPosition 函 数 ， 其 有 三 个 参数 ， 这 三 个 参数 
和 getCurrentPostion 含 意 一 样 ， 区 别 在 于 watchPosition 函 数 是 一 个 监视 器 ， 监 视 用 户 的 位 置 是 


否 发 生变 化 ， 如 果 发 生变 化 ， 浏 览 器 就 会 触发 其 回调 函数 ， 成 功 则 回调 函数 watchMap， 
则 回调 函数 errorHandler。 


失败 
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8.9 示例 9 使 用 Google 地 图 查找 路 线 


8.9.1 示例 效果 


本 示例 演示 一 个 生活 中 经 常用 到 的 场景 ， 根 据 Google 地 图 查找 出 行路 线 。 路 线 查 找 需要 
提供 起 始 位 置 和 目的 地 位 置 。 利 用 HTML 5 提供 的 获取 地 理 位 置信 息 ， 可 以 非常 方便 地 定位 
到 当前 地 理 位 置 ， 然 后 提供 目的 地 ， 就 可 以 根据 Google 地 图 API 查 找 出 行路 线 。 本 示例 演示 
的 路 线 查找 功能 也 可 以 选择 出 行 方式 ， 包 括 自 驾车 、 公 交 、 步 行 、 自 行车 这 4 种 方式 。 

使 用 Chrome 浏 览 器 打开 “使 用 Google 地 图 查找 路 线 ” 网 页 文件 ， 运 行 效果 如 图 8.23 所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经度 : 120.155069 ) } 


起 始 位 置 使 用 当前 位 置 作为 志 始 位 置 


结束 位 置 使 用 当前 位 置 作为 结束 位 时 


图 8.23 查找 路 线 页 面 


在 起 始 位 置 一 栏 单 击 “ 使 用 当前 位 置 作为 起 始 位 置 ” 文 字 按 钮 ， 运 行 效果 如 图 8.24 所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ,经度 : 120.155069 ) 


起 始 位 置 ta 二 使 用 当前 位 置 作为 位 重 


结束 位 置 全 用 当前 位 置 作为 估 吉 位 置 


图 8.24 单 击 使 用 当前 位 置 作为 起 始 位 置 


在 结束 位 置 一 栏 ， 填 写 “ 西 溪 国 家 湿地 公园 ”， 出 行 方案 选择 “公交 ”， 然 后 单 击 查找 
按钮 ， 运 行 效果 如 图 8.25 所 示 。 图 中 左 侧 以 地 图 形式 显示 查找 结果 ， 标 签 A 代 码 起 始 位 置 ， 标 
签 B 代 表 结束 位 置 ， 图 中 右 侧 以 文字 的 形式 显示 具体 的 路 线 信息 。 
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查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经度 : 120.155069 ) } 


地 图 数据 2013 GS(2011)6020 AutoNavi, Google 


图 8.25 查找 去 西溪 国家 湿地 公园 的 路 线 


在 出 行 方案 选项 卡 中 ， 单 击 下 拉 框 选择 驾车 ， 然 后 单 击 “ 查 找 ” 按 钮 ， 运 行 效果 如 图 
8.26 所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ,经 度 : 120.155069 ) } 


ty 置 Room 下 ansnemrueeea 
结 豆 位 置 | REN | smsnpmrwaaea 
出 和 方案 [EE 习 并 


| 2. 在 第 一 个 路 口 向 右 转 ， 朝 密 渡 桥 路 行进 02 公里 
3. 在 第 一 个 路 口 向 左 转 ， 朝 湖 野 南路 行进 04 公里 


四 6. 向 左 转 , 进入 古 到 路 05 公 里 
.在 第 一 个 路 口 向 右 转 ， 彰 天 目 山路 行进 44 公里 


图 8.26 驾车 路 线 


在 出 行 方案 选项 卡 中 ， 单 击 下 拉 框 选择 自行 车 ， 然 后 单 击 “查找 ”按钮 ， 运 行 效 果 如 图 
8.27 所 示 。 


加 载 中 
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8.9.2 代码 设计 与 分 析 


利 


编辑 器 打开 “使 用 Google 地 图 查找 路 线 .hml” 文 件 ， 样 式 部 分 代码 如 下 : 


<style> 


0 lpx 2px rgba(0,0,0,.05);/* 设置 查找 按钮 阴影 */ 
} 

</style> 

HTML 部 分 代码 如 下 : 

01 <p> 查 找 路 线 <span id="info"></span></p> 

02 <div class="section"> <!-- 起 始 位 置 --> 

03 <label for="start"> 起 始 位 置 </label><input type="text" id= 
Gin /3 <!-- 起 始 位 置 输入 框 一 > 

04 <a href="javascript:;" class="btn" id="user-origin"> 使 用 当前 位 置 作 
为 起 始 位 置 </a> 

05 </div> 

06 <div class="section"> <!-- 结 束 位 置 --> 

07 <label for="end"> 结 束 位 置 </1abel><input type="text" 
id="destination" /> <!- -结束 位 置 输入 框 --> 

08 <a href="javascript:;" class="btn" id="user-destination"> 
使 用 当前 位 置 作为 结束 位 置 </a> 

09 </div> 

10 <div class="section"> 

让 <label for="travelMode"> 出 行 方 案 </1label> <!-- 出 行 方案 选择 --> 

2 <select id="travelMode"> 

fi <option value="TRANSIT"> 公 交 </option><! 

14 <option value="DRIVING"> 驾 车 </option><! 


body{ 
margin:50px auto;width:870px;padding:20px;border:lpx solid #c88e8e; 
border-radius: 1l5px; 

height: 100%; /* 设置 高 度 自 适应 */ 
} 
.Item { width:430px; display: inline-block;padding-right:2px;} 
/* 设置 ip 和 wifi 容器 的 宽度 并 左 浮动 */ 
.Section{fpadding: Spx;} 
.btn{text-decoration: none; color: #c89191;font-size: llpx; } 
.btn:hover{text-decoration: underline;} 
input, select{border: #b9aaaa lpx solid; height: 22px;width: 
200px;margin-left:S5px;} 
#map{ height: 400px; width: 430px; text-align: center;} 
/* 设置 地 图 宽 高 */ 
.search{ /* 设置 查找 按钮 样式 */ 

padding: 4px 12px; 

text-decoration: none; 


cursor: pointer; /* 设置 光标 的 手 形 */ 
color: #333333; 
background-color: #f5f5f5; /* 设置 查找 按钮 背景 色 */ 


border-radius: 4px; 
box-shadow: inset 0 lpx 0 rgba(255,255,255,.2), 
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20 


2 
py 


和 23 
24 


25 
26 
2 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 


41 
42 


43 
44 


45 
46 
47 
48 


49 


50 
51 
52 
53 
54 
55 
56 
57 
58 


59 
60 
61 


map = new google.maps.Map (gmap, options), 
// 地 
// 地 图 位 置 标记 
currentMaker = new google.maps.Marker({position: currentPosition, 
map: map，title: "用 户 位 置 "}); 
ginfo.innerHTML = "{ 当前 位 置 (纬度 : " + position.coords.latitude 
+ "， 经 度 : " + position.coords. 
longitude + ") }";// 显示 定位 结果 
directionsDisplay.setMap (map); // 在 地 图 上 显示 路 线 
directionsDisplay.setPanel (directionsPanel); ”// 显示 路 线 查找 文字 结果 
}, 
userSelectionCurrent = function(e){ // 设置 当前 位 置 作为 查找 点 
var prev = this.previousElementSibling; // 获取 input 元 素 
prev.value = ' 我 的 位 置 ' ; // 设置 nput 元 素 的 值 
prev.style.color = 'blue'; // 将 input 元 素 字体 设置 为 蓝 色 
prev.isCurrent = true; // 设置 input 使 用 当前 位 置 来 计算 
Ea 
cancelCurrent = function(){ 
this.style.color = '#111'; // 设置 input 元 素 字体 颜色 为 #111 
this.isCurrent = false; // 设置 不 使 用 当前 位 置 作为 查找 点 


7 
bind = function(){ 
[userOrigin, userDestination] .forEach( function (item){ 
item.addEventListener('click', userSelectionCurrent, 
false); // 绑 定 使 用 当前 位 置 的 单 击 事件 
// 如 果 input 元 素 的 值 为 人 为 改变 ， 则 设置 不 使 用 当前 位 置 作为 查找 点 
item.previousElementSibling.addEventListener('change', 
cancelCurrent, false); 
1); 
search.addEventListener ("click", calcRoute, false); 
// 绑 定 查找 按钮 事件 
ls 
calcRoute = function(){ // 路 线 查 找 函数 
var 
start = origin.isCurrent ? currentPosition : origin.value, 
// 获取 路 线 的 起 始 位 置 
end = destination.isCurrent ? currentPosition : destination. 
value, // 获取 路 线 的 结束 位 置 
selectedMode = travelMode.value, // 获取 路 线 的 出 行 方 式 
request = { // 封装 route 函 数 参 数 
origin:start, 
destination:end, 
travelMode: google.maps.TravelMode[selectedMode] 
}; 
// 调用 Google 地 图 API 请 求 路 线 
directionsService.route(request, function(response, status) { 
if (status == google-maps.-DirectionsStatus.-OK) { 
// 路 线 找到 
directionsPanel.innerHTML = ''; // 清除 文字 结果 
directionsPanel.style.color = ''; // 清除 文字 结果 颜色 
directionsDisplay.setMap (map); // 在 地 图 上 显示 路 线 
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62 directionsDisplay.setDirections (response); 
// 显示 文字 结果 

63 currentMaker.setMap (nul1) 7 // 清除 位 置 标记 
64 je1lset 
65 directionsPanel.style.color = "red'; 
66 // 没有 找到 路 线 
67 if(status google.maps .Directionsstatus. 

ZERO RESULTS){ 
68 // 自行 车 查找 的 特殊 处 理 
69 if(selectedMode === 'BICYCLING'){ 
70 directionsPanel.innerHTML = 

' 没 有 找到 路 线 ， 可 能 是 不 支持 当前 国家 ' ; 
学 下 jelsei{ 
了 和 directionsPanel.innerHTML = 

' 没 有 找到 相关 路 线 ' ; 
33 上 
74 }else if(status == google.maps.DirectionsStatus - 

NOT_FOUND){ 
75 directionsPanel.innerHTML = ' 地 址 没有 找到 '; 
76 }elsef{ 
a directionsPanel.innerHTML = 

' 其 他 错误 : ' + status; 

78 } 
79 directionsDisplay.setMap (nul1);// 清除 上 一 次 显示 的 路 线 
80 CurIentMaker .setMap (map) // 显示 当前 的 位 置 标记 
81 } 
82 ER 
Ba3h 
84 getPosition = function(){ 
85 var 
86 errorHandler = function(error){ // 定位 出 错 处 理 函 数 
87 Switch (error .code){ 
88 case error.PERMISSION DENIED: // 定位 失败 ， 没 有 权限 
89 gmap.innerHTML = "定位 被 阻止 ， 请 检查 您 的 授权 或 者 网 

络 协议 (" + error.message + ")"; 
90 break; 
91 case error.POSITION UNAVAILABLE: // 定位 失败 ， 不 可 达 
92 gmap .innerHTML = "定位 暂时 无 法 使 用 ， 请 检查 您 的 网 络 

(" + error.message + ") "7 
93 break; 
94 case error.TIMEOUT: // 定位 失败 ， 超 时 
95 gmap.innerHTML = "您 的 网 络 较 慢 ， 请 耐心 等 待 . . ."; 
96 gmap .innerHTML = "对 不 起 ， 定 位 超时 "; 
// 超时 了 

97 break; 
98 . 
3 有 
100 getCurrentPosition = function(){ // 定位 函数 
101 navigator.geolocation.getCurrentPosition (showMap, 


errorHandler); 
102 | 
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103 return getCurrentPosition; // 返回 定位 函数 供 外 部 调用 

104}(); 

105 var init = function(){ 

106 if (navigator.geolocation) 1{ 

107 gmap.innerHTML = "定位 中 ..."; 

108 getPosition(); // 定位 开始 

109 bind(); 

110 Eee 

LE gmap .innerHTML = "您 的 浏览 器 不 支持 地 理 位 置 ~<o(n_nm)o~'7 
// 定位 失败 ， 浏 览 器 不 支持 

112 } 

3 

114 google.maps.event.addDomListener (window, 'load', init); 

// 入 口 函数 


第 17 行 ， 在 navigator.geolocation.getCurrentPosition 函 数 的 回调 结果 中 ， 用 currentPosition 
记录 定位 的 结果 。 如 果 是 使 用 当前 位 置 进行 查找 路 线 ， 这 个 结果 在 执行 路 线 查 找 时 会 用 到 。 

第 28 行 ~ 第 33 行 ， 定 义 “ 使 用 当前 位 置 作 为 起 始 位 置 ” 和 “使 用 当前 位 置 作为 结束 位 
置 ”的 事件 处 理 函 数 ， 当 用 户 单 击 其 按钮 时 ， 设 置 其 对 应 的 文本 输入 框 的 值 为 “我 的 位 
置 ”， 并 把 字体 颜色 改 为 蓝 色 。 然 后 设置 变量 isCurent 的 值 为 tue， 用 来 标记 要 使 用 当前 位 置 
作为 起 始 或 者 结束 位 置 。 

第 34 行 ~ 第 37 行 ， 取 消 使 用 当前 位 置 为 作 查找 条 件 。 


IE 当 用 户 在 输入 框 中 敲 入 文字 时 ， 表 示 用 户 不 想 使 用 当前 位 置 来 查找 。 


第 38 行 ~ 第 45 行 ， 定 义 了 “使 用 当前 位 置 作为 起 始 位 置 ”、“ 使 用 当前 位 置 作为 结束 位 
置 ”、 两 个 文本 输入 框 和 “查找 ”按钮 的 事件 代理 。 

第 46 行 ~ 第 83 行 ， 是 查找 路 线 的 处 理 函 数 。 

第 48 行 ~ 第 49 行 ， 获 取 路 线 查 找 的 起 始 和 结束 位 置 ， 如 果 使 用 当前 位 置 ， 则 其 值 为 第 17 
行 代码 赋予 变量 currentPostion 的 值 ， 如 果 不 使 用 当前 位 置 作为 查找 条 件 ， 则 对 应 获取 用 户 输 
入 的 文字 。 

第 50 行 ， 获 取 用 户 选 择 的 出 行 方式 。 

第 57 行 ， 调 用 directionsService 的 route 方 法 ， 该 方法 提供 两 个 参数 。 第 一 个 参数 为 查找 条 
件 (包括 路 线 的 起 始 、 结 束 位 置 和 出 行 方式 等 ) ， 第 二 个 参数 为 查找 结果 的 回调 函数 。 回 调 
函数 中 第 一 个 参数 是 具体 的 路 线 结果 ， 第 二 个 参数 代表 查找 结果 的 状态 。 


| 可- 了 解 更 多 谷歌 地 图 相关 的 查找 路 线 的 信息 接口 ， 读 者 可 以 参考 https://developers.google.com/ 
区 maps/documentation/javascript/reference#DirectionsService。 


第 58 行 ， 表 示 已 经 查找 到 了 结果 。 

第 61 行 ， 如 果 查 找到 路 线 ， 在 地 图 上 显示 出 路 线 。 

第 62 行 ， 在 <div id="directionsPanel"> 上 显示 查找 结果 的 文字 方案 。 

第 65 行 ~ 第 78 行 ， 是 没有 正确 查找 到 路 线 的 错误 处 理 逻 辑 ， 常 见 的 有 三 种 错误 。 
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拖 放大 演练 


拖 电 在 HTML 5 出 现 之 前 是 Web 2.0 时 代 非 常 流行 的 技术 ， 市 面 上 基本 所 
有 的 JavaScript 类 库 都 有 拖 钨 模块 。 在 HTML 5 出 现 之 后 ， 任 何 DOM 元 素 都 
可 以 被 拖 钨 ， 只 需要 在 DOM 元 素 上 简单 地 设置 属性 draggable 为 true， 然 后 就 
可 以 调用 脚本 来 监听 拖 钨 的 各 种 事件 ， 如 拖 钨 开始 、 拖 钨 中 、 拖 灸 结束 、 进 入 
释放 位 置 区 域 等。 另外 ， 拖 外 功能 还 能 和 HTML 5 的 File API 功 能 相互 结合 ， 
实现 拖 灸 文件 上 传 目的 ， 这 些 功 能 的 使 用 都 会 出 现在 本 章 的 示例 之 中 。 


。 网 页 中 各 个 元 素 的 拖 放 
。 制作 一 个 可 拖 放 的 阅读 器 


9.1 示例 1 实现 网 页 元 素 的 拖 放 


9.1.1 示例 效果 


拖 放 事 件 是 HTML 5 标准 的 一 部 分 ， 本 实例 将 结合 此 标准 模拟 桌面 应 用 丢弃 废 文件 的 动 
画 过 程 。 页 面 上 有 3 个 纸 团 ， 将 纸 团 拖 向 蓝 色 纸 繁 ， 纸 繁 会 由 空置 转 为 填 满 状 态 ， 并 发 出 投 
入 纸 团 的 声音 。 使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 结果 如 图 9.1 所 示 。 
单 击 左 侧 1 号 纸 团 ， 拖 动 到 纸 繁 上 方 ， 此 时 光标 状态 由 “ 拖 动 ” 变 为 “放置 ”。 松 开 鼠 
标 ， 此 时 1 号 纸 团 消失 ， 纸 得 左右 摇摆 ， 同 时 纸 繁 状态 由 空置 变 为 被 填 满 状 态 ， 音 频 发 出 纸 
团 被 丢 入 纸 繁 的 声音 ， 纸 繁 前 的 数字 由 0 变 为 1， 运 行 效果 如 图 9.2 所 示 。 

依次 拖 入 2 号 、3 号 纸 团 ， 重 复出 现 上 述 过 程 。 


B 加 


名 地 多 多 多 


图 9.1 使 用 Chrome 打 开 网 页 文件 司 9.2 拖 动 1 号 纸 团 并 丢 入 纸 签 


志 


NIHTML samme ee 


提 
[故去 本 例 代 码 在 Chrome 下 测试 通过 。 


9.1.2 代码 设计 
利用 编辑 器 打开 “实现 网 页 元 素 的 拖 放 -html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 


02 <html> 
03 <head> 
04 <style> 
05 .garbage{ width:120px; height:135px; position: relative; } 
/* 纸 繁 样式 类 */ 
06 .garbage if /* 纸 签 纸 团 计数 */ 
07 position: absolute; top: 6lpx; left: 46px; 
08 font-weight:bold; color:red; 
09 } 
10 .empty{ background:url(../images/garbage-e.png) no-repeat; } 
/* 空 状态 纸 繁 */ 
1 .full{ background:url(../images/garbage-f.png) no-repeat; } 
/* 满 状态 纸 签 */ 
2 .papert{ /* 纸 团 样式 类 */ 
13 background:url(../images/paper.png) no-repeat;float:left; 
14 width:64px; height:57px; cursor:move; position: relative; 
Ls5 } 
16 .paper if /* 纸 团 编号 */ 
BY position: absolute; top: l8px; left: 23px; 
18 font-weight:bold; color:black; 
19 } 
20 .line 3d{ /* 垃圾 桶 摇摆 样式 类 */ 
2 -webkit-animation-name:shake; 
22 -webkit-animation-duration:1s; 
23 } 
24 @-webkit-keyframes shake{ /* 定义 投放 垃圾 动画 名 */ 
25 from{-webkit-transform:rotate (0deg);} 
26 20%{-webkit-transform: rotate (20deg);} 
2 60%{-webkit-transform:rotate(-20deg);} 
28 to{-webkit-transform: rotate (0deg);} 
i } 
30 </style> 
31 </head> 
32 <body> 
33 <header><h2> 实 现 网 页 元 素 的 拖 放 </h2></header> 
34 <section> 
3 <!-- 垃圾 桶 --> 
36 <div class="garbage empty"><i>0</i></div> 
3 <!-- 垃圾 丢 放 音频 --> 
38 <audio src="../res/garbage.mp3"> 您 的 浏览 器 不 支持 audio 标 签 </audio> 
39 </section> 
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@ |HTML 5 网 页 开发 实 四 洋人 


代码 第 38 行 为 音频 元 素 ， 用 于 播放 纸 团 投入 纸 得 时 的 声音 。 
代码 第 42 行 ~ 第 44 行 为 三 个 纸 团 的 HTML 结 构 ， 每 个 元 素 都 设置 draggable 属 性 为 tue， 表 
明 该 元 素 允 许 被 拖 动 。 
代码 56 行 ~ 第 60 行 ， 循 环 三 个 纸 团 元 素 ， 分 别 监 听 元 素 的 dragstart 事 件 ， 当 元 素 开 始 被 拖 
动 时 触发 该 事件 。 事 件 触发 后 ， 将 目标 纸 团 元 素 赋值 于 闭 包 中 的 current paper 变量 。 
代码 61 行 ~ 第 63 行 ， 监 昕 纸 得 元素 的 dragover 事 件 ， 并 在 被 触发 时 ， 调 用 方法 
preventDefault， 阻 止 浏览 器 的 默认 行为 ， 否 则 无 法 触发 纸 签 元 素 drop 事 件 。 
代码 64 行 ~ 第 75 行 ， 完 成 整个 动画 的 后 半 程 效果 。 当 纸 团 投入 纸 繁 ， 首 先 ， 调 用 音频 元 
素 的 play 方 法 播放 声音 。 接 着 ， 给 纸 繁 的 样式 加 入 摇摆 动画 样式 类 “line_3d”， 并 设置 一 个 
计时 器 ， 在 1s 动 画 结束 后 移 除 纸 签 的 动画 样式 类 “line 3d”。 
代码 第 70 行 ~ 第 72 行 ， 通 过 正则 表达 式 判断 纸 签 样式 类 中 是 否 含有 值 为 fnll 样 式 类 〈 表 示 
纸 繁 填 满 状 态 ) ， 如 果 存 在 则 不 继续 添加 。 
在 代码 第 58 行 ， 将 当前 触发 的 拖 动 纸 团 元 素 保 存在 current_paper 变 量 中 ， 代 码 第 74 行 利 
该 保存 的 变量 ， 将 当前 拖 入 纸 签 的 纸 团 元 素 从 DOM 中 移 除 。 


9.2 示例 2 拖 放 图 标 


9.2.1 示例 效果 


本 例 使 用 HTML 5 模拟 移动 设备 拖 放 功 能 。 整 个 示例 外 观 很 像 一 个 平板 电脑 界面 ， 页 面 
摆 放 着 各 种 应 用 图 标 ， 使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 结果 如 图 9.3 所 示 。 
单 击 其 中 一 个 图 标 ， 并 在 屏幕 上 进行 拖 动 ， 运 行 结果 如 图 9.4 所 示 。 


图 9.3 使 用 Chrome 打 开 网 页 文件 图 9.4 鼠标 拖 动 图 标 
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查 _ 
| 国 玉 读者 可 以 尝试 多 次 拖 动 图标 ， 图 标 无 法 超越 矩形 边界 。 


9.2.2 代码 设计 
利用 编辑 器 打开 “ 拖 放 图 标 .html” 文 件 ， 代 码 如 下 : 


01 <!doctype html> 


02 <html> 

03 <head> 

04 <style> 

05 .phone{ /* 模拟 平板 外 宽 */ 

06 background:url(../images/phone.jpg) no-repeat; 

07 background-position:-287px -84px; 

08 position: relative; width: 450px; height: 550px; 

09 -moz-border-radius: 10px; /* 屏幕 圆 角 效果 */ 

10 -webkit-border-radius: 1l0px; 

1 border-radius: lO0px; 

12 3 

由 3 img{ width:59px; height:60px; cursor:pointer; position: absolute;} 
14 .facebook{ top: 48px; left: 45px; } /* facebook 图 标 位 置 */ 

15 .contacts{ top: 48px; left: 145px;} /* 通讯 录 图 标 位 置 */ 
16 .Ccalculator{ top: 48px; left: 245px;} 

bye .Ccamera{ top: 48px; left: 345px;} 

18 .pro{top: 165px; left: 45px;} 

19 .flashlight{top: 165px; left: 145px;} 

20 .Copiercin{top: 165px; left: 245px;} 

2 .bossprefs{top: 165px; left: 345px;} /* 开关 图 标 位置 */ 

22 </style> 

23 </head> 

24 <body> 

25 <header><h2> 拖 放 图 标 </h2></header> 

26 <section> 

27 <div class="phone"> 

28 <!-- 图 标 按钮 列表 开始 --> 

29 <img class="facebook" src="../images/icon/facebook.png" /> 
30 <img clas contacts" sr ./images/icon/contacts.png" /> 
当下 <img class="calculator" src="../images/icon/calculator.png" /> 
2 <img class="camera" src="../images/icon/camera.png" /> 

3 <img class="pro" src="../images/icon/pro.png" /> 

34 <img class="flashlight" src="../images/icon/flashlight.png" /> 

35 <img class="copiercin" src="../images/icon/copiercin.png" /> 
36 <img class="bossprefs" src="../images/icon/bossprefs.png" /> 
3 <!-- 图 标 按钮 列表 结束 --> 

38 </div> 

39 </section> 

40 </body> 

41 <script> 

42 (function () { 

43 var slice = Array.prototype.slice, 

44 phone = document .querySelector ('div.phone'), KR 角 屏 幕 
45 icons slice.call (document .querySelectorAll('img'), 0); 


// 所 有 图 标的 元 素数 组 
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元 素 的 页 面 坐标 不 能 超出 浏览 器 之 外 ， 同 时 ， 获 取 和 矩形 苹果 界面 背景 左上 、 左 下 、 右 上 、 右 
下 4 个 点 的 坐标 ， 判 断 图 标的 元 素 坐标 在 此 区 域 之 内 。 


9.3 示例 3 设置 拖 放 的 效果 


9.3.1 示例 效果 


HTML 5 不 仅 提供 了 更 强 的 元 素 拖 放 功 能 ， 同 时 还 在 拖 放 效果 增强 上 给 出 了 更 多 选择 。 
本 例 延 续 丢 废 纸 的 场景 ， 在 拖 放 的 同时 加 入 图 片 跟 随和 图 标 变换 效果 。 使 用 最 新 版 本 Opera 浏 
览 器 打开 网 页 文件 ， 运 行 结果 如 图 9.5 所 示 。 


经 测试 ， 最 新 版 本 Chrome 浏 览 器 在 支持 setDragImage 等 关键 API 上 存在 问题 ， 本 例 建议 采用 
lIR™ 最 新 版 本 Opera 打 开 运行 。 


E: 


你 


击 ! 号 纸 团 ， 并 拖 至 垃圾 桶 ， 效 果 如 图 9.6 所 示 。 松 开 鼠 标 ，1 号 纸 团 消失 ， 垃 圾 桶 被 填 
满 。 依 次 拖 入 2 号 、3 号 纸 团 ， 效 果 与 1 号 纸 团 相同 。 


B 已 


多 和 志 作乱 


图 9.5 使 用 Opera 打 开 网 页 文件 图 9.6 将 1 号 纸 团 拖 至 垃圾 桶 


9.3.2 代码 分 析 


本 例 代码 的 主体 逻辑 部 分 与 “实现 网 页 元 素 的 拖 放 .html” 相 同 ， 下 面 就 增强 部 分 做 一 个 
分 析 。 
监听 纸 团 元 素 的 两 个 拖 放 事 件 dragstart 和 dragend， 代 码 如 下 : 


01 paper.addEventListener('dragstart'，function (e) {  // 监听 纸 团 拖 动 开始 事件 


02 current paper = paper; // 设置 被 拖 动 的 纸 团 于 闭 包 变量 中 

03 e.dataTransfer.effectAllowed = 'move'; // 允许 拖 动 操作 类 型 
04 e.dataTransfer.setDragImage (current paper, 10, 0);// 设置 拖 放 时 效果 
05 paper.style.opacity = '0.4'; // 设置 纸 团 透 明度 


06 }, false); 
07 paper.addEventListener('dragend'，function (e) { // 监听 纸 团 拖 放 结束 事件 
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08 paper.style.opacity = '1'; // 恢复 纸 团 的 透明 度 
09 }; false)y 


代码 第 03 行 ， 设 置 e.dataTransfer 的 effectAllowed 属 性 值 为 move， 表 示人 允许 拖 放 元 素 执行 


move 行 为 。 除 了 示例 中 的 move 外 ， 还 有 其 他 几 种 行为 ， 说 明 如 下 。 


。 uninitialized: 浏览 器 默认 拖 放 行为 ， 表 示 未 被 设置 。 
。 none: 被 拖 动 的 元 素 不 能 有 任何 行为 。 

。 copy: 只 允许 值 为 copy 的 dropEffect。 

。 link: 只 允许 值 为 link 的 dropEffect。 

。 copyLink: 允许 值 为 copy 和 link 的 dropEffect。 

。 copyMove: 允许 值 为 copy 和 link 的 dropEffect。 

。 linkMove: 允许 职位 link 和 move 的 dropEffect。 

。 all: 允许 任意 dropEffect。 


其 中 ， 如 果 effectAllowed 值 为 uninitialized 时 ， 又 分 为 三 种 情况 ， 说 明 如 下 : 


。 拖 放 元 素 为 文本 框 中 选中 的 内 容 : 允许 值 为 move、copy 和 link 的 dropEffect。 
。 拖 放 元 素 为 普通 选中 项 : 允许 值 为 copy、link 和 move 的 dropEffect。 
。 拖 放 元 素 为 带 链接 的 a 元 素 : 允许 值 为 link、copy、move 的 dropEffect。 


代码 第 04 行 是 实现 拖 放 效 果 的 关键 ， 语 法 如 下 : 
datatransfer.setDragImage (element, x, y) 

// 使 用 元 素 替换 拖 忠 反馈 ， 其 中 x 和 y 表 示 相对 于 鼠标 的 坐标 

上 面 讲 到 dropEffect 属 性 ， 读 者 可 能 有 些 不 明白 ， 下 面 看 看 如 何 使 用 这 个 属性 ， 代 码 如 下 : 


01 garbage.addEventListener('dragover', function (e) { 
// 鼠标 拖 电 在 该 元 素 上 移动 时 触发 
02 e .PreventDefault () 7 // 阻止 浏览 器 元 素 默认 时 间 
03 e.dataTransfer.dropEffect = 'move'7 // 拖 放 移动 中 的 效果 
04 }, false); 


注意 ， 在 第 03 行 代码 中 ，dropEffect 属 性 被 设置 为 与 当初 effectAllowed 相 同 的 值 move， 表 


示 


目标 元 素 drop 事 件 允 许 被 监听 move 行 为 ，dropEffect 属 性 有 4 种 可 能 的 值 ， 说 明 如 下 。 


。 none: 不 能 被 拖 放 入 元 素 。 

。 move: 允许 把 拖 放 元 素 移 动 到 放置 目标 。 

。 copy: 允许 把 拖 放 元 素 复制 到 放置 目标 。 

。 link: 拖 放 元 素 必 须 是 a 元 素 ， 放 置 目标 会 打开 被 拖 放 元 素 。 


IE 还 有 更 多 拖 放 功 能 本 例 没有 充分 展现 ， 想 了 解 更 多 关于 拖 放 效 果 的 调用 方法 和 功能 ， 可 以 参 


考 网 站 https://developer.mozilla.org/en-US/docs/DragDrop/DataTransfer。 
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48 


49 


50 
本 下 
52 
3 
54 


font-family: "Gochi Hand', cursive; 
font-size;: 25px;? width: 320pX7 
border: 2px solid black; padding:S5px; 
border-radius: 10px; /* 圆 角 */ 
-moz-border-radius: 1l0px; -webkit-border-radius: 1l10px; 
background-color: #f£f1f1lf1; 

} 

img {width:70px; height:70px; margin:0 Spx;} /* 商品 图 片 样式 */ 

divf /* 单个 商品 样式 */ 
border-bottom: 2px solid black; 
Cursor: move; padding-top:S5px; 
-webkit-transition: -webkit-transform 0.2s ease-out; 

/* CSS 3 动画 */ 

-moz-transition: -moz-transform 0.2s ease-out; 
transition: transform 0.2s ease-out; 

1 

.over {background-color: #FFFFDS5;} /* 拖 动 悬浮 元 素 样式 */ 

.moving { /* 被 拖 动 元 素 样式 */ 
opacity: 0.25; 
-webkit-transform: scale(0.97); /* 元 素 缩小 */ 
-moz-transform: scale(0.97); transform: scale(0.97); 

} 
</style> 
</head> 
<body> 

<header><h2> 对 照片 进行 排序 </h2></header> 

<section> 

<!-- 商品 元 素 列表 --> 

<div draggable="true"><img src=". ./images/shop/ 黑 色 护 腕 .png" 


draggable="false"/> 黑 色 护 腕 </div> 


0 省 略 其 他 商品 结构 ， 可 以 查看 本 书 网 络 资源 --> 
</section> 
</body> 
<script> 
(function () { 
Var slice = Array.prototype.slice, 
list = slice.call (document .getElementsByTagName ('div'), 0), 
// 商品 元 素 列表 数组 
move_item; // 当前 拖 动 元 素 
list.forEach (function (item) { // 循环 数组 ， 监 听 元 素 事件 
item.addEventListener('dragstart', function (e) { 
// 拖 动 开始 触发 
e.dataTransfer.effectAllowed = 'move'7 
// 设置 拖 动 允许 的 事件 行为 
e.dataTransfer.setData('html', e.target.innerHTML); 
// 保存 目标 元 素 结构 至 拖 忠 数据 中 
this.style.opacity = '0.4'; 
this.classList.add('moving'); 
move item = item; // 将 目标 元 素 保存 在 闭 包 变量 中 
}: false)s 
item.addEventListener('dragenter', function (e) { 


366 


ee 第 9 章 “ 拖 放大 演练 


// 拖 入 元 素 边界 内 触发 


55 e.target.classList.add('over'); 
56 }, false); 
5 item.addEventListener('dragover', function (e) { 

// 元 素 在 目标 元 素 上 移动 
58 e.preventDefault (); // 阻止 默认 事件 ， 保 证 drop 被 触发 
5 e.target.classList.add('over'); 
60 jr false)s 
61 item.addEventListener('dragleave', function (e) { 

// 元 素 离 开 目标 元 素 触 发 
62 e.target.classList.remove('over'); 
63 }, false); 
64 item.addEventListener('drop', function (e) { 

// 拖 忠 元 素 放 在 目标 元 素 内 
65 Var target = e.target; 
66 if (move item != target) { // 拖 动 元 素 与 放置 元 素 不 同 
67 move_item.innerHTML = item.innerHTML; 

// 将 被 拖 放 元 素 结构 填充 为 放置 元 素 
68 item.innerHTML = e.dataTransfer.getData('html'); 
// 设置 拖 放 元 素 结构 为 被 拖 放 元 素 

69 }; 
70 }, false); 
入 站 item.addEventListener('dragend', function (e) { 

// 拖 忠 完毕 后 触发 
了 2 this.style.opacity = '1'» 
3 list.forEach (function (item) { 
74 item.classList.remove('moving'); // 移 除 拖 动 样式 
了 5 Ds; 
76 jr falseys 
277 Hs 


78 HA 
79 </script> 
80 </html> 


9.4.3 代码 分 析 


代码 从 46 行 开始 ， 监 听 商 品 列表 元 素 的 拖 拒 相关 事件 。 首 先 看 dragstart 事 件 ， 设 置 
dataTransfer 的 effectAllowed 属 性 为 move， 人 允许 拖 忠 的 移动 事件 行为 。 调 用 dataTransfer 的 


setData 方 法 ， 存 储 


标 元 素 HTML 结 构 ， 该 方法 语法 如 下 : 


event .dataTransfer.setData (dataFormat, data); 


// 存放 被 拖 数据 的 值 ， 其 中 dataFormat 为 字符 类 型 


接着 设置 目标 元 素 的 透明 度 为 0.4， 表 示 该 元 素 正 在 被 执行 拖 忠 操作 ， 并 为 该 元 素 添加 
moving 样 式 类 。moving 样 式 类 带 有 一 个 CSS 3 的 动画 效果 ， 将 元 素 的 尺 长 缩减 至 原来 的 0.97 
倍 。 在 dragstart 的 事件 最 后 ， 将 目标 元 素 缓存 至 闭 包 中 的 move item 变量 内 ， 后 面 会 在 drop 事 


件 中 进行 使 用 。 


触发 dragenter 和 dragover 这 两 个 事件 后 ， 要 做 的 事情 很 相似 ， 给 被 进入 和 被 悬浮 的 元 素 添 


加 over 样 式 类 ， 该 样式 类 会 改变 元 素 的 背景 色 为 淡 黄色 。 值 得 注意 的 是 ， 在 dragover 监 
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中 ， 会 执行 事件 对 象 的 preventDefault 方 法 ， 阻 止 元 素 默 认 行为 ， 确 保 元 素 的 drop 事 件 被 正确 


触发 。 
拖 遇 元 素 离开 商品 列表 时 ， 触 发 dragleave 事 件 ， 此 时 移 除 被 进入 元 素 的 over 样 式 类 ， 取 
消 背景 淡 黄 色 的 效果 。 


当 拖 蝶 的 元 素 被 放置 在 商品 列表 其 中 的 任意 元 素 ， 触 发 drop 事 件 。 触 发 后 ， 首 先 判断 被 
拖 昂 元 素 和 放置 的 元 素 是 否 为 同一 元 素 ， 如 果 为 同一 元 素 ， 表 明 元 素 被 放置 于 自身 之 上 ， 此 
时 不 执行 任何 动作 。 如 果 不 是 ， 则 设置 被 拖 鬼 元素 的 HTML 结 构 为 目标 元 素 的 HTML 结 构 。 
同时 ， 将 目标 元 素 的 结构 设置 为 被 拖 忠 元 素 结 构 ， 这 里 用 到 了 dataTransfer 的 getData 方 法 ， 获 
取 在 dragstart 事 件 触发 时 存 入 的 被 拖 抱 元 素 的 HTML 结 构 字符 ， 该 方法 语法 如 下 : 

event .dataTransfer.-getData(dataFormat) 7 // 从 指定 字符 中 获取 存放 被 拖 数 据 的 值 


dragend 事 件 会 在 所 有 拖 电 事 件 结束 后 被 触发 。 触 发 后 ， 恢 复 目 标 元 素 的 透明 度 ， 并 循环 
移 除 所 有 元 素 的 moving 样 式 类 。 


顽 - 示例 中 绑 定 元 素 的 事件 顺序 与 元 素 被 拖 名 后 触发 的 事件 顺序 相同 ， 按 事件 触发 的 先后 顺序 排 
区 序 为 : dragstart、dragenter、dragover、dragleave、drop、dragend。 


9.4.4 相关 知识 


1. @font-face 


在 CSS 3 出 现 之 前 ， 设 计 师 和 开发 人 员 只 能 使 用 计算 机 上 安装 好 的 字体 。CSS 3 带 来 了 
“@font-face” 规 则 ， 人 允许 使 用 任何 字体 ， 可 以 将 字体 存放 在 服务 器 上 ， 需 要 呈现 时 被 下 载 
到 用 户 计算 机 。 本 例 中 的 使 用 如 下 : 


@font-face { 
font-family: 'Gochi Hand'; 
src:local('GochiHand'),1local('GochiHand-Regular'), url('http://******. 
woff') format('woff'); 


} 
sectiont{ 
font-family: 'Gochi Hand', cursive; 
} 
。 font-family: 规定 了 字体 的 名 称 。 
。 src: 定义 字体 文件 的 URL。 字 体 类 型 有 woff 文 件 后 组 的 格式 ， 还 有 ttf 和 eot 等 格式 。 
。 local: 表示 本 地 的 字体 文件 名 。 


虽然 网 络 字体 的 好 处 不 言 而 喻 ， 但 是 中 文 网 络 字体 由 于 其 体积 庞大 加 上 版 权 问题 ， 所 以 
离 实际 的 使 用 还 有 一 段 距离 。 
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01 var slice = Array.prototype.slice, 


02 


03 
04 
05 
06 
07 
08 
09 
10 
并 
12 
13 
14 
15 
16 
17 
18 
19 
20 
2 
人 2 
23 
24 
25 
26 
27 
28 
2 
30 
3 


2 
33 
34 


35 
36 
3 
38 
人 
40 
41 
42 


43 
44 


45 
46 


list = slice.call (document .getElementsByTagName ('div'), 0), 
// 商品 元 素 列表 数组 
section = document .querySelector('section’'), 
move_item, // 当前 拖 动 元 素 
reader, 
events = { 
"dragstart': function (e) { // 拖 动 开始 触发 
WA 省 略 (与 示例 “对 照片 进行 排序 ”基本 相同 ) ， 请 参看 本 书 网 络 资源 
}, 
'dragenter': function (e) { // 拖 入 元 素 边界 内 触发 
Var files = e.dataTransfer .files; 
if (files && !files.length) {// 判断 为 非 拖 入 文件 情况 
e.target.classList.add('over'); 
}; 
}s 
'dragover': function (e) { // 元 素 在 目标 元 素 上 移动 
VO 省 略 (与 示例 “对 照片 进行 排序 ”基本 相同 ) ， 请 参看 本 书 网 络 资源 
}, 
'dragleave': function (e) // 元 素 离开 目标 元 素 触发 
Ve 省 略 (与 示例 2 对照 片 进行 排序 * 基本 相同 ) ， 请 参看 本 书 网 络 资源 
近 
'drop': function (e) { // 拖 忠 元 素 放 在 目标 元 素 内 
VA 省 略 (与 示例 “对 照片 进行 排序 ”基本 相同 ) ， 请 参看 本 书 网 络 资源 
}, 
'dragend': function (e) { // 拖 忠 完毕 后 触发 
VA 省 略 (与 示例 “对 照片 进行 排序 ”基本 相同 ) ， 请 参看 本 书 网 络 资源 
} 
I 


list.forEach (function (item) { // 循环 数组 ， 监 听 元 素 事件 


for (var key in events) { 
item.addEventListener (key, events[key], false); 
// 监听 元 素 事件 

] 7 


section.addEventListener('drop', function (e) { 


// 监听 列表 容器 的 drop 事 件 


e.preventDefault (); 


var files = e.dataTransfer .files; // 获取 从 系统 拖 入 的 文件 对 象 列 表 


if (!files || !files.length) { // 没有 文件 对 象 拖 入 情况 
return; 

1; 

files = slice.call (files, 0); // 将 文件 列表 转 为 数组 


files.forEach (function (file) { 
if (file.type.toLowerCase() .match(/image.*/)) { 
// 判断 是 否 为 图 片 文件 
reader = new FileReader(); // 实例 化 FileReader 对 象 ， 读 取 文 件数 据 
reader.addEventListener('load', function (e) { 
// 监听 FileReader 实 例 的 load 事 件 
Var item = document -CreateElement ('div'); 
item.setAttribute('draggable', true); 


// 设置 元 素 允 许 拖 动 
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47 item.innerHTML = '<img src="' + e.target.result + 
'™ draggable="false"/>' + file.name.split('.') [0]; 

48 for (var key in events) { // 循环 绑 定 新 建 元 素 事件 

49 item.addEventListener (key, events[key], false); 

50 }5; 

51 section.appendChild (item); // 将 商品 元 素 添加 到 列表 中 

5 Ds 

53 reader.readRsDataURL (file) 7 // 读 取 文件 为 DataURL 

54 }; 

55 Ds 

56 1); 


57 section.addEventListener('dragleave', function (e) { 
// 鼠标 拖 忠 离开 该 元 素 时 触发 

58 e.preventDefault (); 

59 ]7 Talse)s 


9.5.3 代码 分 析 
代码 06 行 ~ 第 28 行 ， 定 义 了 一 个 事件 对 象 字面 量 events， 里 面包 含 了 事件 d 


Tagstart、 


dragenter、dragover、dragleave、drop、dragend。 其 中 要 注意 的 是 代码 第 12 行 ， 该 条 判断 保证 


事件 触发 由 页 面 中 的 商品 列表 元 素 产生 ， 避 免 由 本 地 文件 夹 文件 拖 动 造成 。 


代码 第 29 行 -第 33 行 ， 循 环 页 面 上 的 商品 元 素 列表 ， 分 别 绑 定 events 对 象 字面 量 内 的 各 个 事件 。 


由 于 后 续 新 建 的 商品 元 素 还 需要 绑 定 该 事件 列表 ， 所 以 本 例 将 各 种 事件 对 象 独 立 
变量 中 。 


到 一 个 对 象 


先 看 最 后 三 行 代码 ， 监 听 商 品 列表 容器 section 元 素 的 dragleave 事 件 。 触 发 后 调用 事件 对 


象 的 preventDefault 方 法 ， 阻 止 元 素 的 默认 行为 ， 确 保 drop 事 件 被 正确 调 


代码 第 34 行 ~ 第 56 行 ， 主 要 完成 了 在 文件 放置 于 列表 后 ， 将 图 片 和 图 片 文件 名 添 添加 到 商 


品 列表 ， 并 绑 定 排序 相关 事件 的 这 一 系列 动作 。 从 代码 第 41 行 开始 ， 循 环 由 drop 寻 


事件 获取 的 


文件 列表 ， 判 断 文件 类 型 是 否 为 图 片 类 型 。 当 遇 到 图 片 类 型 文件 ， 新 建 FileReader 对 象 ， 读 取 
文件 内 容 。 在 读 取 完 毕 的 load 事 件 回调 函数 中 ， 新 建 一 个 DIV 商品 元 素 容器 ， 填 充 图 片 和 文 
字 ， 并 循环 绑 定 events 事 件 ， 最 后 添加 到 商品 列表 中 。 添 加 完毕 后 ， 商 品 列表 的 每 个 元 素 之 


间 可 以 相互 拖 忠 ， 效 果 与 示例 “对 照片 进行 排序 ”相同 。 


.6 示例 6 将 商品 拖 入 购物 车 


区 


9.6.1 示例 效果 


经 常 上 电子 商务 网 站 的 朋友 都 非常 喜欢 购物 车 这 个 功能 。 传 统 的 购物 车 ， 一 般 在 每 个 商 
品 周围 会 有 一 个 “添加 购物 车 ”按钮 ， 用 户 单 击 该 按钮 ， 购 物 车 中 就 会 出 现 对 应 的 商品 。 本 
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例 将 结合 HTML 5 拖 投 功能 ， 实 现 更 加 贴近 现实 的 添加 购物 车 功能 ， 用 户 可 以 使 用 鼠标 将 商 
品 直 接 拖 中 入 购物 车 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 结 果 如 图 9.12 所 示 。 


¥98.00 ¥74.50 ¥7000 
了 fine 于 广 本 和 大 FE 时 村 各 天福 瑟 癌 二 
月 到 1735 (1958A 刘 所 兴 到 3092 CO76 人 评论 ) 汪 984 (下 人 证 的 


¥180.00 ¥78.00 ¥28000 
去 再 符 产 = 七 瑟 两 相 村 如 3 性 辐 干 正品 天 山 早生 村 浊 基 在 于 
7994 204 人 评 的 ) 212 [94 人 评论 ) 4300 CE784 人 证 的 


ET | 
图 9.12 使 用 Chrome 打 开 网 页 文件 


单 击 左 侧 商 品 列表 的 第 一 件 商品 ， 并 拖 息 入 右 下 角 购 物 车 内 ， 被 拖 息 商品 尺寸 变 小 并 呈 
现 透明 ， 效 果 如 图 9.13 所 示 。 


图 9.13 拖 中 第 一 件 商品 入 购物 车 


在 购物 车 上 方 松 开 鼠 标 ， 此 时 ， 第 一 件 商品 在 商品 列表 中 消失 ， 并 慢 慢 的 从 购物 车 中 出 
现 ， 效 果 如 图 9.14 所 示 。 
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请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 
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60 1); 
61 list items.bind({ // 绑 定 商品 列表 若干 事件 
62 'mouseenter': function () { $(this).addclass('product-hover'); }, 
// 鼠标 移入 效果 增强 
63 "mouseleave': function () { $(this) .removeCclass ('product-hover'); }, 
// 移出 效果 消失 
64 "dragstart': function (e) { 
65 Var self = $(this); 
66 e-originalEVvent -dataTransfer-effectRllowed = "move'7 
// 设置 拖 动 允 许 的 事件 行为 
67 self.css('opacity'，0.4) .addCclass ('moving')7 
// 修改 元 素 样式 并 添加 动画 
68 current item = self; // 记录 当前 的 拖 忠 元 素 
69 } 
70 'dragleave': function (e) { e.preventDefault(); }, 
// 阻止 默认 事件 触发 
了 "dragend' : function (e) { $(this).css('opacity', 


了 人 
J3 
74 
75 
76 


mn 
78 
YA， 
80 
81 
82 


83 
84 


85 


86 


87 
88 
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1) .removeClass('moving') } // 拖 电 结束 元 素 样式 恢复 


ghandle.bind({ // 绑 定 购物 车 若干 事件 
'dragover': function (e) { 
e -preventDefault (); // 阻止 浏览 器 元 素 默认 时 间 
e.originalEvent.dataTransfer.dropEffect = 'move' 7 
// 设置 拖 放 移动 中 的 效果 
] 
'drop': function (e) { // 商品 元 素 放 置 购物 车 
Var item = $(substitute(tpl, { // 获取 商品 元 素 信息 
path: current item.find('img').attr('src'), 
// 地 址 
title: current item.find('h3.product-title a').text(), 
// 商品 描述 
price: current item.find('span.ui-price strong') .text() 
// 商品 价格 
1)); 
item.data('product', current item) .css('opacity', 0); 
// 缓存 商品 并 设置 透明 
current item.animate({ opacity: 0 }, 500, function () 


{ $(this) .higde()}); // 商品 元 素 渐 隐 消失 


ggroup .prepend (item); // 添加 商品 到 购物 车 
item.animate({ opacity: 1 }, 500); // 购物 车 商品 渐 显 
} 


90 </script></html> 


9.6.3 代码 分 析 
本 例 为 了 使 代码 更 加 简洁 ， 使 用 第 三 方 类 库 jQuery 开发 ， 官 网 地 址 为 http://jquery.com。 


代码 第 09 行 ~ 第 21 行 给 出 了 单个 商品 列表 元 素 的 DOM 结 构 。 需 


意 ， 在 最 外 围 的 1 元 素 


中 设置 draggable 属 性 为 tue， 表 示 该 元 素 允 许 被 拖 抱 ， 可 以 被 用 来 触发 drop 事 件 。 


代码 第 24 行 ~ 第 29 行 为 购物 车 的 DOM 结 构 ， 该 区 域 样式 被 设置 为 一 直 停留 在 浏览 器 的 右 下 角 。 


代码 第 30 行 ~ 第 36 行 ， 使 用 script 标 签 存储 购物 车 商品 元 素 的 HTML 字符 模板 ， 注 意 脚本 
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标签 的 type 属 性 ， 这 里 被 赋予 “text/x-html5-tmpl” 的 自 定义 内 容 ， 浏 览 器 不 会 将 该 模板 内 容 
识别 为 脚本 并 执行 。 
酸 除了 使 用 自 定义 脚本 类 型 的 方法 存储 HTML 字 符 模板 外 ， 通 常 还 会 使 用 textarea 标 签 进行 存 
5 储 ， 这 是 前 端 开发 中 非常 实用 的 技巧 ， 读 者 可 以 运用 在 平常 开发 中 。 

结束 了 DOM 结 构 的 分 析 ， 下 面 进 入 本 示例 的 关键 JavaScript 部 分 。 

代码 第 46 行 ~ 第 50 行 ， 监 听 购 物 车 底部 红色 横 条 的 单 击 事件 ， 实 现 购物 车 列表 的 收缩 和 
展开 功能 。 这 里 使 用 jQuery 的 animate 方 法 实现 动画 效果 ， 语 法 如 下 ; 


时 


element -animate ( properties [,duration] [veasing] complete] ) 


。 properties: CSS 属 性 对 象 ， 对 应 的 值 表示 属性 的 最 后 状态 。 
。 duration: 动画 持续 时 间 ， 默 认为 400ms， 可 选 。 

。 easing: 缓 动 函数 的 类 型 ， 可 选 。 

。 complete: 执行 完毕 后 的 回调 函数 。 


棍 _ 
[臣下 animate 方 法 更 多 信息 可 以 参考 网 站 http://apijquery.com/animate/。 


代码 第 51 行 ~ 第 60 行 ， 监 听 购 物 车 外 围 容器 的 单 击 事件 ， 当 触发 事件 的 目标 元 素 经 历 事 
件 冒 泡 ， 最 终 被 监听 事件 捕捉 后 ， 通 过 样式 类 名 判断 触发 元 素 是 否 为 关闭 按钮 。 如 果 发 现 为 
关闭 按钮 ， 则 移 除 按钮 对 应 的 购物 车 商品 ， 并 恢复 左 侧 商品 列表 内 对 应 的 商品 。 

代码 第 61 行 ~ 第 72 行 ， 监 听 左 侧 列表 的 每 个 商品 元 素 的 mouseenter、mouseleave、dragstart、 
dragleave、dragend 事 件 。 监 听 mouseenterg 事 件 和 mouseleave 事 件 ， 是 为 了 实现 移入 和 移出 商品 时 
背景 色 变换 效果 。 在 dragstart 事 件 中 ， 代 码 第 66 行 是 实现 拖 昌 效果 必须 注意 的 地 方 ，dataTransfer 的 
dropEffect 属 性 规定 了 人 允许 拖 动 的 事件 行为 ， 与 dragover 监 听 事 件 的 移动 效果 相对 应 。 

代码 第 73 行 ~ 第 79 行 ， 监 听 购 物 车 的 dragover 和 drop 事 件 。 其 中 ， 代 码 第 76 行 设置 
dataTransfer 的 dropEffect 属 性 为 move， 表 示 当 元 素 被 拖 拒 入 其 中 后 对 应 的 效果 。 当 购物 车 drop 
事件 被 触发 后 ， 首 先 获取 商品 列表 中 的 商品 信息 ， 并 填 入 购物 车 元 素 HTML 字 符 模板 ， 产 生 
购物 车 商品 元 素 。 接 着 ， 将 该 元 素 添加 到 购物 车 的 顶部 ， 并 使 用 动画 淡 进 效果 出 现 ， 同 时 被 
拖 入 的 元 素 使 用 动画 淡出 效果 渐渐 地 消失 。 


[=Th 


9.7 示例 7 拖 放 图 片 保存 服务 器 


9.7.1 示例 效果 


很 多 网 站 都 会 在 个 人 中 心 模块 提供 一 个 相册 的 功能 ， 用 户 可 以 将 平日 喜爱 的 照片 上 传 至 
相册 与 朋友 进行 分 享 交流 。 本 例 将 从 实际 应 用 出 发 ， 实 现 相册 中 的 图 片上 传 功能 ， 程 序 包含 
客户 端 和 服务 器 端 ， 读 者 可 以 通过 本 例 的 学 习 ， 全 面 完 整地 了 解 制作 上 传 图 片 模块 的 过 程 。 
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使 用 Chrome 浏 览 器 打开 网 页 文件 “ 拖 放 图 片 保存 服务 器 .html”， 效 果 如 图 9.15 所 示 。 
打开 本 例 对 应 的 服务 器 端 脚 本 文件 夹 “upload-server”， 如 图 9.16 所 示 。 
放 了 主要 的 上 传 服务 逻辑 脚本 ，“package.json” 存 放 了 模块 的 描述 信息 ， 
文件 夹 存放 程序 依赖 模块 ，“images” 用 于 存放 客户 端 上 传 的 图 片 文件 。 


“server.js” 存 


“node modules” 


龙 放 图 片 保 存 服 务 器 
扼 搜 图 片 至 此 
-请 -~- | 冯 
昌 isees 文件 夹 
BM node_nodules 文件 来 
国 package json JSON 文件 
Lin) 国 server js JSeript Seript 文件 
图 9.15 使 用 Chrome 浏 览 器 打开 网 页 文件 图 9.16 服务 器 端 脚本 文件 夹 “upload-server” 


Windows 下 打开 命令 行进 入 对 应 的 “upload-server” 文 件 夹 ， 执 行 代 码 如 下 : 
node server.js 

如 果 启 动 成 功 ， 命 令 行 提示 如 下 : 

listening on http://localhost:8080 


打开 光盘 源 代码 库 的 “images\product” 商 品 图 片 文件 夹 ， 选 中 所 有 图 
面 “ 拖 电 图 片 至 此 ”区 域 ， 效 果 如 图 9.17 所 示 。 


片 并 拖 遇 至 示例 页 


读者 可 以 挑选 任意 其 他 图 片 文件 天 进行 拖 间 。 


拖 扫 图片 至 此 


图 9.17 选中 图 片 贴 拖 描 至 网 页 上 传 区 域 


松 开 鼠 标 ， 被 拖 各 的 图 片 显示 在 网 页 中 ， 并 且 每 张 图 
条 ， 效 果 如 图 9.18 所 示 。 


单 击 上 传 图 片 按钮 ， 图 片 中 央 的 进度 条 随 着 图 片 的 上 传 变 为 百分之百 ， 同 时 服务 器 端的 
images 文 件 夹 出 现 刚刚 上 传 的 图 片 ， 效 果 如 图 9.19 所 示 。 


片 中 央 都 带 有 一 个 窍 形 的 上 传 进度 
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噶 一 量 霹 宇 国 


EE Fo 二 NJpo 百 SJp9 棉 包 Jpg 
柏 杞 Jpg 多 mn 果 pg =tiiiro 性 图 二 mm SR 果 pg 
图 9.18 松 开 鼠标 ， 图 片 显示 在 网 页 中 图 9.19 所 有 图 片上 传 完毕 


9.7.2 代码 设计 和 分 析 
首先 分 析 客户 端 网 页 代码 ， 打 开 “ 拖 放 图 片 保存 服务 器 html”， 代 码 如 下 ; 


01 
02 


03 
04 
05 
06 
07 
08 
09 
10 
二 


2 
3 
14 


15 
16 
i 
18 
EE 
20 
21 
22 
2 
24 


29 


<!ldoctype html><html> 
<head><style>/* .. .样式 代码 省 略 ， 详 见 本 书 网 络 资源 */ </style><script src=".. 
/js/jquery-1.8.3.js"></script></head> 
<body> 
<header><h2> 拖 放 图 片 保存 服务 器 </h2></header> 
<ul class="picture-list"> 
<script i [item tpl" type="text/x-html5-tmpl"> 
<div class="info"> 


<div class="img"> 


<div class="wraper"> 
<img src="{src}" title="{name}"/> 
<div class="progressbar"><div class="progressbar- 
value"></div></div> 


</div> 
</div> 
<h3 class="picture-title"><a href= 
blank">{name}</a></h3> 
</div> 
</script> 
<div class="picture-tip"> 拖 忠 图 片 至 此 </div> 
</ul> 
<a href="#" class="button green"> 上 传 图 片 </a> 
</body> 
<script> 
var slice = Array.prototype.slice, // 获取 数组 slice 原 型 方法 
tpl = $('#J item tp17") .html()， List = {ual .picture List 
list tip = $('div.picture-tip'), upload btn = 
$('a.button'), 
substitute = function (str, sub) { // 字符 串 格式 化 函数 
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26 


到 六 
28 
之 时 
30 
31 
32 
33 


34 


35 


36 


37 


38 
39 
40 
41 
42 
43 
44 
45 


46 
47 
48 
49 
50 
51 
52 
53 


54 
55 


56 
57 
58 


59 
60 
61 
62 
63 
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return str.replace(/\{(-+2?)\}/g，function ($0, $1) 
{ return $1 in sub ? sub[$1] : $0; }); 
jw 
file list = []; 
function render list(files) { 


file list = file list.concat (files); 
files.forEach (function (file, index) { // 循环 File 数 组 
var reader; // reader 变 量 存放 FileReader 实 例 


item = $(document -createElement ('1i')).attr("class", 
picturer AZ 
if (file.type.toLowerCase() .match (/image-*/)) { 
// 用 正则 表达 式 判 断 文件 是 否 为 图 片 类 型 
reader = new FileReader(); 
// 实例 化 FileReader 对 象 ， 用 于 读 取 文件 数据 
reader.addEventListener('load', function (e) { 


// 监听 FileReader 实 例 的 load 事 件 


item.htm]l (substitute(tpl, { name: file.name, 
src: e.target.result })); 
list.append (item); // 添加 到 商品 列表 尾部 
]) 7 
reader.readAsDataURL (file) 7 // 读 取 文件 为 DataURL 


files.length ? list tip.hide() : list tip.show(); 
}; 
item.bind({ 


mouseenter: function () { item.addClass('picture-hover'); 


mouseleave: function () { item.removeClass('picture- 
hover'); } 


}; 
function upload file (file, index) { // 用 于 上 传单 个 文件 


}， 


var xhr = new XMLHttpRequest(),// 实例 化 xMLHttpRequest 对 象 ， 用 于 与 后 台 通信 
formData = new FormData() // 实例 化 Formpata 对 象 ， 用 于 存储 表单 数据 信息 


item = list.find('1i') .eq(index), 

progress = item.find('div.progressbar-value'); 

// 获取 对 应 上 传 文件 的 显示 进度 条 
formData.append('file'，file); // 添加 文件 数据 到 formData 对 象 
xhr.open('post', ‘'http://localhost:8080', true); 

// 初始 HTTP 请 求 ， 设 置 请 求 类 型 、 地 址 、 是 否 异 步 


xhr.addEventListener('load', function () { // 读 取 完 毕 后 触发 


var data = JSON.parse (xhr.responseText); // 将 返回 的 字符 串 转化 为 对 象 


item.find("a') .attr('href', 'http://localhost:8080/' + 
data.name); 
Ds; 


xhr.upload.addEventListener('progress'，function (e) {// 读 取 中 触发 


Var percent; 


if (e.lengthComputable) { // 是 否 可 以 计算 上 传 字 节 数 


percent = (e.loaded / e.total * 100) + '%'; 
// 已 上 传 字 节 数 除 以 总 字 节 ， 计 算 上 传 百分比 
progress.css('width', percent); 


// 更 新 上 传 进度 条 样式 为 当前 上 传 比例 相同 
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65 Progress .html (percent); // 更 新 上 传 百 分 比 

66 file list[index] = null; // 清空 列表 对 应 索引 内 容 
67 7 

68 Fi 

69 xhr .send (formData) 7 // 发 送 数据 到 服务 器 

70 progress.css('display', "block')7 

RL 


72 list.bind('dragover', function (e) { e.preventDefault ();}); 


// 拖 忠 在 该 元 素 上 移动 时 触发 


73 list.bind('drop', function (e) { // 拖 奥 在 该 元 素 上 释放 时 触发 

74 e.preventDefault (); 

2 render list(slice.calll(e.originalEvent.dataTransfer.files, 0)); 

76 31) 

77 upload btn.bind('click', function (e) { 

78 e.preventDefault (); 

79 file list.forEach(function (item, index) { 

80 item && upload file (item，index); // 文件 如 果 存 在 ， 则 上 传 至 服务 器 
81 Tn 

82 1); 


83 </script></html> 


代码 第 06 行 ~ 第 16 行 ，script 标 签 内 存放 了 上 传 后 图 片 元 素 的 HTML 字 符 模板 ， 用 script 标 
签 存放 模板 是 前 端 开 发 中 的 常用 技巧 。 

代码 第 29 行 ~ 第 48 行 为 函数 render_list， 用 于 读 取 图 片 文 件 ， 生 成 上 传 图 片 列表 。 代 码 第 
31 行 ， 将 每 次 拖 折 的 图 片 文件 对 象 都 存 入 变量 file_list 中 ， 以 便 在 上 传 时 方便 地 获取 图 片 文件 
对 象 。 循 环 开始 ， 生 成 样式 类 名 为 picture 的 li 元 素 作 为 上 传 图 片 容器 。 通 过 File 对 象 的 type 属 
性 判断 文件 是 否 为 图 片 类 型 。 对 于 图 片 类 型 文件 ， 新 建 一 个 FileReader 的 实例 ， 调 用 实例 方法 
readAsDataURL 读 取 文 件 内 容 ， 在 监听 读 取 文件 对 象 的 load 事 件 回 调 函 数 中 ， 组 装 上 传 图 片 元 
素 的 字符 模板 并 添加 到 页 面 图 片 列表 元 素 的 末尾 。 

代码 第 49 行 ~ 第 71 行 为 函数 upload_file， 用 于 将 图 片 文件 对 象 通过 Ajax 返回 给 图 片 服务 
器 进行 保存 。 代 码 第 52 行 ， 通 过 传 入 参数 index， 获 取 对 应 列表 位 置 的 图 片 容 器 元 素 。 将 文 
件 对 象 填充 入 formData 的 实例 ， 设 置 XMLHttpRequest 的 实例 对 象 的 远程 请 求 地 址 为 http:// 
localhost:8080， 该 上 传 地 址 即 通 过 Node.js 实 现 的 图 片上 传 服务 器 地 址 。 图 片上 传 完毕 后 ,将 
file_list 数 组 对 应 的 index 索 引 位 置 内 容 设 置 为 mull， 确 保 该 图 片 文件 不 被 二 次 上 传 。 

代码 第 80 行 ， 每 次 单 击 上 传 图 片 按钮 ， 循 环 包 e_list 数 组 并 调用 upload_file 方 法 ， 在 调 
之 前 会 先 判 断 数 组 索引 位 置 内 容 是 否 为 空 。 

下 面 分 析 服 务 器 端 代码 。 服 务 器 端 逻辑 采用 Nodejs 实 现 ， 提 供 了 两 部 分 功能 :查看 图 片 
类 型 请 求 和 保存 上 传 内 容 。 

先 看 查看 图 片 的 GET 请 求实 现 ， 代 码 如 下 : 

01 var pathname = url.parse (req.url) .pathname, Tad 从 请 求 地 址 分 析 文 件 名 

02 filepath = dirname + '\\images' + pathname; // 图 片 文件 地 址 

03 fs.readFile(filepath, "binary", function (err, file) { 

// 读 取 文件 为 binary 
04 if (err) { 
05 res.writeHead(500, { '‘'Content-Type': 'text/plain' }); 


// 读 取 错误 并 返回 500 头 信息 
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下 : 


06 
07 
08 


09 
10 
11 
12 


res.end('500'); 
} else { // 设置 正确 的 content-Type 信 息 
res.writeHead(200, { 'Content-Type': 'image/' + 
path.extname (pathname) .slice(1) }); 
res.write (file, "binary"); // 写 入 图 片 二 进 制 流 内 容 


res.end(); 


DD); 


变量 “_dimame” 为 Node.js 全 局 变量 ， 表 示 服 务 脚本 的 具体 运行 时 地 址 。fs 变 量 为 对 应 
File System 模 块 的 引用 ， 用 于 文件 的 操作 。fs 对 象 的 readFile 方 法 用 于 读 取 文件 内 容 ， 语 法 如 


fs 


.readFile (filename, [options], callback) 


filename: 文件 具体 的 地 址 。 
options: 文件 读 取 的 编码 格式 。 
callback: 读 取 结 束 后 的 回调 函数 ， 回 调 函 数 接收 两 个 参数 ， 错 误 信息 和 文件 内 容 。 


接着 分 析 上 传 保存 部 分 脚本 逻辑 ， 代 码 如 下 : 


01 
02 
03 


04 
05 
06 
07 


08 
09 
10 


LE 
hh 
.3 
14 


15 


16 


Wp 
18 


var single file, file name; 
form.on('end', function () { // 监听 form 上 传 结束 事 件 
res.write(JSON.stringify({"code": 200, "name": file name })); 


// 写 入 上 传 成 功 状态 码 和 信息 


res.end(); // 响应 结束 
}) .on('file', function (field, file) { // 监听 form 文 件 上 传 事件 
single file = file; // 将 上 传 文件 file 实 例 存 入 数组 


file name = crypto.createHash('md5') .update (single file.name. 
split('.') [0]) .digest ('hex'); 
file name += '.' + single file.name.split('.')[1]; 
}) .on('error', function (error) { // 监听 form 上 传 出 错 事件 
res.write(JSON.stringify({"code": 500, "msg": ， 上 传 失 败 ，' 
+ error })); // 写 入 上 传 失败 状态 码 和 信息 
res.end(); 
]) 2 
form.parse(req, function (err) { // 解析 请 求 信息 并 保存 文件 
util.pump (fs.createReadstream(single file.path), 
// 读 取 文 件 内 容 并 写 入 地 址 
fs . createWriteStream(_ dirname + '\\images\\' + file_ 
name), function (err) { 
if (err) { console.log(err); } 
J 
Dh 


变量 form 为 第 三 方 模块 formidable 中 IncomingForm 的 实例 ， 代 码 如 下 : 


Var formidable = require ("formidable"); wf 引用 formidable 模 块 ， 用 于 文件 保存 
var form = new formidable.IncomingForm(); // 新 建 IncomingForm 实 例 


在 file 事 件 的 监听 函数 中 ， 将 上 传 文件 的 文件 名 进行 MD5 加 密 处 理 ， 防 止 因 中 文 文件 名 导 
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拖 动 脚本 文件 压缩 


this. get 
function() 


nt}) eval ("var 
)ivar encode=e;ver 
llection; ver 
is sire Di; for (var i=0,iCeount;it+) 


), ijvar eapty=functionO 
function (word) 


图 9.22 脚本 文件 被 压缩 显示 


9.8.2 代码 设计 


利 


编辑 器 打开 “ 拖 动 脚本 文件 压缩 html” 文 件 ， 代 码 如 下 : 


01 
02 
03 
04 
05 


06 
07 
08 
09 
10 
下 
12 
3 
14 
15 
16 
7 
18 
3 
20 
过 让 
了 
3 
24 
25 
26 
六 


28 
29 
30 


3 


<!ldoctype html> 
<html> 
<head> 
<!-- 开源 脚本 压缩 工具 --> 
<script src="../js/base2-load.js"></script><script src="../js/ 
Packer.js"></script> 
<script src="../js/Words.js"></script> 
<style> 
textarea{ /* 文本 框 样式 */ 
font-family: 宋体 ; width:320px; height:220px; 
border: 2px solid black; color: #777; 
box-shadow: 0 0 5px #ddd inset; /* 文本 框 阴影 */ 
margin: 0px auto; border-radius: 2px; 
background-color: #F9F9F9; font-size: 12px; 
} 
</style> 
</head> 
<body> 
<header><h2> 拖 动 脚本 文件 压缩 </h2></header> 
<textarea> <!-- 文本 区 域 -->> 
// Javascript 在 线 压 缩 工 具 
// 请 将 代码 文件 拖 中 到 此 处 
</textarea> 
</body> 
<script> 
(function () { 
Var textarea = document .querySelector('textarea'); 
textarea.addEventListener('dragover', function (e) { 
// 拖 电 在 该 元 素 上 移动 时 触发 
e-preventDefault (); // 阻止 元 素 默认 事件 ， 确 保 arop 正 常 触 发 
}, false); 
textarea.addEventListener('drop', function (e) { 
// 鼠标 拖 点 在 该 元 素 上 释放 时 触发 
e.preventDefault () // 阻止 元 素 默 认 事件 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


修改 代码 实现 更 加 


定义 本 地 文本 阅读 器 的 可 能 。 本 例 将 展现 


选中 本 地 文件 夹 中 的 文本 章节 ， 拖 忠文 本 章节 至 “目录 ” 


全 一 


了 文件 四 绩 生 呈 下 看 W 工具 0 而 90 
mn- a mm» -0| 3 忆 
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目录 收 括 沪 帆 于 ?有朋 自 运 方 来 ,不 闻 乐 于 ? 人 不 知 而 不 但 


i 网 Re 上 者 ,证 和 ,不 好 J 上 Ti 好 作 二 者 ,未 之 有 也 ， 
也 才 ， 心 业 器 三 -学 噶 也 痢 , 其 为 仁之 不 与 3” 
“号 启 令 色 , 钟 交 全。 

让; 全 3 全 入 人 不 玫 ? Ee 不 人 于 ?人 不 习 于 7? 
子 日 ; 道生 所 之 国 , 故事 而 信 , 节 用 而 爱人 人 ， 使 二 DB。 
子 日 : 关子 入 则 地 ,出 则 丧 ， 道 而 信 ， 泛 受众 而 亲 仁 ， 行 有 余力 ， 则 以 学 ， 
子 本 日 : 贤 易 色 , 事 从 图 ,阴沟 上 力 。 事 如, 能 到 其 号 ， 与 朋友 交 ， 言 而 店堂 

。 虽 日 未 宇 ， 吾 必 请 之 字 疾 . 
子 目 ; 刀子 不 重 册 不成， 学风 不 国 。 主 中 入， 无 友 不 如 己 套 ,过 刚 乱 伴 改 。 
管子 日 ; 依 才 这 远 ， 民 得 月 原 
子 商 问 于 于 页 日 : “夫子 硅 于 是 邦 也 , 必 间 其 政 。 求 之 与 ? 萎 与 之 与 ? ” 子 贡 日 
:夫子 温 良 区 从 让 以 得 之 。 夫 子 求 之 也 ,其 尘 异 手 人 之 武之 与 ? 
子 日 : 在 ， 观 有 志 ， 人 8 , 观 R 行 。 三 年 无 到 于 人 之 证, 可 请 池 关 - 
有 子 日 ; 礼 之 用 , 和 为 品 。 先 王 之 道 斯 为 美 。 小 大 由 之 ， 有 所 不 行 、 和 0 而 和 , 
不 以 礼节 之 ， 疗 不 可 行 也 。 
有 子 日 : 信 近 于 义 ， 言 可 复 也 ,者 上 E 于 礼 , 远 台 夸 也 。 因 不 先 其 厅 , 亦 可 宗 也 , 
子 日 : 妊 子 食 无 求 狗 ,局 无 玉 安 。 敏 于 事 而 伺 于 言 ， 就 有 着 而 正和 看、 可 户 季 字 也 


已。 

子 贡 日 ， “省 而 无 次 , 富 而 无 轿 。 何 如 ? ″ 子 日 : “可 也 ， 未 若 吕 而 乐 ,高 而 好 
礼 者 也 ,“ 子 贡 日 :“ 诗 云 ; 如 切 知 磁 , 如 吸 如 府 ， 其 所 之 亩 与 ?” 子 日 : “ 昭 
也 ， 始 可 与 言 诗 己任 。 告 洛 往 而 知 来 者 。” 

子 日 : 不 感人 之 不 己 知 , 刘 不 知人 也 


图 9.23 使 用 Chrome 打 开 网 页 文件 


三 本 5 


二 计 机 子 醒 日 : 贤 师 易 色 , 事 父母 ， 
。 昌 日 未 学 ， 吾 必 滑 之 学 关 。 
ed 子 日 : 因子 不 重 则 不 威 , 学 见 


图 9.24 选中 本 地 文本 拖 电 至 “目录 ”区 域 


Re TITLE 
育 收藏 | 子 日 :“ 巧 言 令 色 , 鲜 活 仁 。 
曾子 日 : 各 日 三 省 乎 看 身 。 闪 


ET | 子 日 : 道生 之 国 ， 客 事 而 们 


子 日 : 弟子 入 则 孝 ,出 则 愧 ， 


现 一 个 相对 简单 的 本 地 阅读 器 版 本 ， 读 者 可 以 自行 
F 富 的 功能 。 使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 结果 如 图 9.23 所 示 。 


区 域 ， 效 果 如 图 9.24 所 示 。 


松 开 鼠标 ，“ 目 录 ” 区 域 新 增添 加 对 应 的 章节 文件 导航 ， 效 果 如 图 9.25 所 示 。 


单 击 “ 为 政 第 二 ”章节 导航 ， 阅 读 器 内 容 随即 切换 为 该 章 


目录 
履 绽 
的 


为 政 第 二 


图 9.25 新 增 拖 蝶 章 节 导航 


节 内 容 ， 效 果 如 图 9.26 所 示 。 
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HTIML 5 网 页 开发 实例 详解 


该 阅读 器 还 具备 收缩 目录 导航 功能 ， 单 


学 i 第 一 Ce 号 之 以 咕 , 开 之 以 礼 ， 疡 时 目 格 . 
= 十 而立, 四 二 而 不 惑 , 五 + 而 知 天 命 , 六 十 而 了 大 


二 ” 兰 R 基 , 子 告 之 : "至 玉 9 地 于 我 , 我 对 日 天 
”=°099 | 0. "4, 32Lal, nm, #2LhL, 从 之 名 
二 二 自 同 地 ,于 日 :信号 ， 哈 疾 之 全 

子 湖 引 者. 子 日 : “ 今 之 地 者， 如 二 半 养 ， 王 于 大 皇 ， 儿 9 养 ， 不必 ， 何 81 
乎 7?” 

子 本 .了 日 : “ 色 难 .有事 , 弟子 报 劳 , 再 活 食 ,先生 塌 , 入 是 以 为 地平 
2 


子 日 : 吾 与 回 言 终日 ,不 违 如 号 ， 退 而 省 牙 私 ， 亦 是 以 发 ， 回 也 不 辕 . 

子 日 : 视 其 所 以 ， 观 其 所 二 , 罕 其 所 安 ,人 二 和 喜 ! 人 下风 成 ! 

子 日 : 吝 故 而 各 新， 可 以 为 师 甘 - 

子 日 : 用 子 不 虹 。 

子 两 本 召 子 。 子 日 : “先行 其 言 而 后 从 之 。 

子 日 : 嫩 子 周 而 不 比 ， 小 人 比 而 不 周 . 

子 日 : 学 而 不 加 则 图 ， 思 而 不 学 则 玖 。 

子 日 : 攻 乎 异 谋 , 拓 害 也 已 

子 日 : 由 ， 话 六 知之 卑 ! 知之 为 知之 , 不知 为 不 知 ,是 知 也 。 

子 张 罕 干 禄 。 子 日 ; “多 逆 隐 寿 , 导言 其 余 ， 则 春 万 。 多 见 疯 妆 , 信行 其 余 , 则 
也 侮 。 去 窜 亡 ， 行 喜 侮 ， 

克 作 辣 所 “本 为 用 7 ”虱子 对 Fi 。 "3 身材 诸 村 用 后 括 * 举 籽 错 读 庙 


图 9.26 单 击 “ 为 政 第 二 ”章节 导航 
“目录 ”区 域 “ 收 缩 ” 按 钮 ， 该 区 域 收缩 至 阅 


读 器 外 侧 左 上 角 ， 效 果 如 图 9.27 所 示 。 


目 ze 一 
录 子 日: 用 ， 责 HH 后 ， 玫 F ， 而 众 显 闪 之 

一 言 以 第 之 , 日 " 思 无 88。" 
子 日 : 叶 之 凡 芭 , 开 之 以 德 ， 民 锡 而 无 对。 导 之 凡 德 ， 开 之 以 礼 ,有 时 且 格 . 
子 日 ; 大 十 有 五 祝 志 于 学 ,三 十 而 立 ， 四 十 而 不 要 , 五 二 而 知 天 命 ,六 十 而 本 顺 
,七 十 而 从 心 所 馈 不 通 算 
二 中 子 问 学 ,了 日 : “E 注 。“ 状 得 ,了 告 之 日 ;“ 圣 孙 癌 部 于 我 ,我 对 昌 无 
运 ,，” 将 日 ; “全 沁 也 ?” 子 互 ，“ 生 , 事 之 以 礼 ， 死 ,吉之 以 礼 , 祭 之 以 礼 


日 es 叭 寺 括 之 所， 
之 这 ， 喜 月 能 痢 ， 至 于 大 马 ， 当 能 有 痢 ， 不 教 , 何以 3 


子 更 癌 过 、 子 日 : “ 色 淮 . 有事 , 关子 服 其 5 , 有 条 合 ,先生 霸 ， 普 是 以 为 字 平 
3 


子 日 ; 吾 与 回 言 父 日 ， 不 过 如 旦 , 进而 省 其 私 , 亦 足以 发 。 回 也 不 辕 、 
子 日 ; 视 莽 折 以 , 观 雪 所 由 ,来 其 记 安 ， 人 条 甸 级 ! 人 二 粤 站 1 
子 日 ; 温 故 而 如 新 ， 可 以 为 是 全. 
日 ; 在 子 不 名 。 
子 巩 间 厂 子 。 子 日 : “先行 其 言 而 后 从 之 、 
子 日 : 杏子 于 而 不 比 ,小 人 kt 而 不 周 , 
子 日 : 学 而 不 思 则 网 ， 忆 而 不 学 则 殉 . 
子 日 ; 攻 平 噶 笛 , 斯 害 也 己 ， 
子 日 ; 由 , 诲 涩 知之 平 ! 知 之 为 知之 ， 不知 为 不 如 , 是 知 也 。 
子 张 学 干 祝 ， 子 日 : “ 字 则 病 疑 , 什 三 其 余 , 则 土 尤 、 铺 见 钢 给 , 贷 行 其 余 , 则 
等 侮 ， 去 疏 万 ， 絮 在 天 中 央 ， 
让 人 - HEB 7” 昼 生 对 只 “ 尝 青 缮 访 奸 “ 风 忆 操 学 本 错 刻 让 


图 9.27 单 击 “ 收 缩 ”按钮 


9.9.2 代码 设计 


利用 编辑 器 打开 “可 拖 放 文 本 阅读 器 .html” 文 件 ， 代 码 如 下 : 

01 <!DOCTYPE HTML><html> 

02 <head><style>/* ...... 省 略 样 式 代 码 ， 详 见 本 书 网 络 资源 */</style></head> 

03 <body> 

04 <header><h2> 可 拖 放 文本 阅读 器 </h2></header> 

05 <section> 

06 <aside class="bar"><h2> 目 录 </h2></aside><!-- 文章 目录 缩小 区 域 --> 
07 <aside class="1istn> <!-- 文章 标题 列 目录 区 域 --> 
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08 
09 
10 
Ly 
12 


13 
14 
as 
16 
Ln 
18 
19 
20 
27 
2 这 
23 
24 
25 


26 
2 
28 
2 
30 
3 
32 
33 
34 
35 
36 
3 
38 
3 
40 


41 
42 
43 


44 
45 
46 
47 
48 


49 
50 
si 
名 
53 


<h2> 目 录 </h2> 
<div class="handle"><a href="#"> 收 缩 </a></div> 
<div class="title active"> 学 而 第 一 </div> 
</aside> 
ZartiCTeS/ 省 略 文章 内 容 ， 详 见 本 书 网 络 资源 */</article> 
<!-- 文章 内 容 区 域 --> 
</section> 
</body> 
<script> 
var slice = Array.prototype.slice, 
list bar = document.querySelector(' .bar'), // 目录 标签 
list = document .querySelector(' .list'), // 悬浮 目录 列表 
shrink btn = list.querySelector('.list a'), // 缩小 按钮 
article = document .querySelector('article'), // 阅读 文本 
first_article = document.querySelector(' .title'),// 首 个 文章 标题 
CRCHE = {}, // 文章 缓存 变量 
article click event = function (e) { // 单 击 文章 导航 事件 
Var titles = document.querySelectorAll('.title'); 
for (var i = 0, 1 = titles.length; i < 17 i++) { 
// 移 除 所 有 当前 样式 
titles[i] .className = ' title'7 
this.className += ' active'7 // 设置 单 击 按钮 样式 
article.innerHTML = CACHE[this.innerHTML];  // 获取 缓存 内 容 
] 7 
first article.addEventListener('click', article _ click event，false) 


list bar.addEventListener('click', function (e) { // 绑 定 展开 按钮 
list bar.style.display = "none'7 
list.style.display = 'block'; 
}, false); 
shrink btn.addEventListener('click'，function (e) { // 绑 定 缩小 化 按钮 事件 
list bar.style.display = 'block'; 
list.style.display = 'none'; 
}, false); 
list.addEventListener('dragover', function (e) { 
// 拖 忠 在 该 元 素 上 移动 时 触发 
e.preventDefault (); 
}, false); 
list.addEventListener('drop', function (e) { 
// 拖 忠 在 该 元 素 上 释放 时 触发 
e.preventDefault (); 
var files = slice.call(e.dataTransfer .files, 0); 
files.forEach (function (file) { 
var reader = new FileReader (); // 实例 化 FileReader 对 和 象 ， 读 取 文 件数 据 
reader.addEventListener('load', function (e) { 


// 监听 FileReader 实 例 的 load 事 件 


Var name = file.name.split("'.') [0], 

data = CACHE [name]; // 按 文章 名 获取 文章 内 容 
if (!data) { 

CACHE [name] = e.target.result; // 缓存 文章 内 容 


Var item = document.createElement ('div'); 
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// 创建 文章 标题 导航 


54 item.className = 'title'; 

55 item.innerHTML = name; 

56 item.addEventListener('click', article click event, 
false); 

57 list.appendCchild (item); // 添加 到 导航 条 末尾 

58 1; 

5 }7 false)? 

60 reader.-readRsText (file); // 将 文件 读 取 为 文本 

61 Fy 

62 }, false); 

63 CACHE [first article.innerHTML] = article.innerHTML; 
// 缓存 页 面 内 容 

64 </script></html> 

9.9.3 代码 分 析 


文本 阅读 器 分 成 目录 和 内 容 两 块 区 域 。 目 录 区 用 于 拖 昂 本 地 文件 和 展现 选择 显示 的 标 
题 ， 内 容 区 用 于 展现 选中 标题 的 内 容 。 代 码 第 17 行 ~ 第 21 行 是 脚本 需要 操作 的 元 素 节点 。 代 
码 第 22 行 用 于 存放 当前 页 面 文章 和 拖 护 文章 的 内 容 变量 对 象 ， 对 象 的 键 为 文本 的 名 称 ， 值 为 
文本 文档 的 内 容 。 

代码 第 23 行 ~ 第 30 行 为 函数 article_click_event， 用 来 处 理 单 击 目录 文章 名 后 的 操作 。 首 
先 ， 移 除 所 有 导航 目录 的 激活 状态 ， 然 后 给 被 单 击 的 文章 标题 添加 激活 的 样式 ， 最 后 从 缓存 
变量 对 象 CACHE 中 获取 对 应 标题 的 文本 内 容 填充 至 阅读 区 域 。 

代码 第 32 行 ~ 第 39 行 ， 主 要 实现 目录 的 收缩 和 展开 功能 。 

代码 第 43 行 ~ 第 62 行 实现 本 地 文本 文件 拖 忠 至 阅读 器 的 功能 。 首 先 ， 监 昕 目录 列表 的 drop 
事件 ， 在 触发 该 事件 后 ， 获 取 拖 中 的 文件 对 象 ， 循 环 使 用 FileReader 对 象 读 取 每 个 文件 的 内 
容 ， 关 键 方法 为 readAsText， 语 法 如 下 : 


fileReader. readAsText (file, encoding) 


。 file: 文件 对 象 。 
。 encoding: 返回 数据 所 使 用 的 编码 。 如 果 不 指定 ， 默 认为 UTF-8。 


文件 读 取 完毕 ， 会 触发 FileReader 对 象 的 load 事 件 。 在 该 事件 中 ， 首 先 ， 获 取 文件 去 除 后 
缀 的 名 称 ， 将 获取 的 文件 内 容 以 文件 名 为 键 缓 存 至 CACHE 变 量 对 象 中 ， 同 时 ， 创 建 一 个 新 的 
DIV 元 素 表 示 文 章 的 标题 ， 添 加 至 目录 未 尾 。 

代码 第 63 行 ， 获 取 页 面 原 有 章节 内 容 缓存 至 对 象 变量 CACHE 中 ， 确 保 CACHE 变 量 拥有 
所 有 章节 内 容 信息 。 
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HTML 5 不 仅 带 来 了 丰富 的 语义 标签 ， 同 时 还 带 来 了 一 项 非常 强大 的 
特性 ， 称 为 离线 本 地 存储 。 在 Web 2.0 时 代 ， 客 户 端的 数据 存储 基本 通过 
Cookie 来 实现 ， 这 给 应 用 带 来 了 极 大 的 限制 和 网 络 性 能 消耗 。HTML 5 提出 
了 全 新 的 方案 ， 本 章 示例 将 介绍 SessionStorage、LocalStorage 的 原生 用 
法 ， 同 时 还 会 介绍 和 分 析 笔 者 开发 的 离线 缓存 类 库 源 码 ， 深 入 浅 出 地 让 读者 
了 解 在 不 同 版 本 的 浏览 器 之 间 实 现 统一 接口 的 离线 缓存 方案 ， 最 后 还 会 介绍 
如 果 安 全 地 使 用 本 地 存储 。 


本 章 知识 点 : 

。 SessionStorage 和 LocalStorage 
。 制作 一 个 桌面 提醒 工具 

。 各 种 离线 缓存 方案 


10.1 示例 1 保存 与 读 取 登录 用 户 名 与 密码 


10.1.1 示例 效果 


日 常 的 登录 网 页 ， 在 现在 的 浏览 器 中 已 经 具备 将 每 次 登录 成 功 的 信息 进行 记录 的 功 
能 ， 用 户 可 以 在 下 次 登录 时 ， 轻 松 地 输入 部 分 内 容 并 补充 完整 信息 。 本 例 从 实际 出 发 ， 采 有 
HTML 5 本 地 存储 功能 模拟 浏览 器 这 个 过 程 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 10.1 所 示 。 在 “昵称 ”输入 框 和 “ 密 
码 ” 输 入 框 内 输入 测试 用 户 信息 ， 了 昵称 和 密码 均 为 test， 单 击 “ 登 录 ” 按 钮 ， 运 行 效果 如 图 
10.2 所 示 。 


2 上 上 ts 
己 双 至 | [se | 


司 10.1 使 用 Chrome 打 开 网 页 文件 司 10.2 输入 信息 单 击 “ 登 录 ” 按 钮 
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登录 后 ，“ 了 昵称 ”和 “密码 ”输入 信息 消失 。 单 击 “ 了 昵称 ”输入 框 ， 下 方 出 现下 拉 账 户 
提示 ， 内 容 为 刚刚 输入 的 “昵称 ”信息 ， 效 果 如 图 10.3 所 示 。 单 击 提示 框 内 test 账 号 ， 提 示 框 
消失 ，“ 了 昵称 ”和 “密码 ”输入 框 内 被 填 入 内 容 ， 效 果 与 图 10.2 相 同 。 


图 10.3 “昵称 ”输入 框 下 方 出 现 账户 提示 信息 


10.1.2 代码 设计 


利 月 


01 
02 
03 
04 


05 
06 
07 
08 
09 
10 
11 


12 
3 
14 
15 
16 
1 
18 
19 


20 
21 
区 
和 3 
24 
25 
26 
之 入 


有 编辑 器 打开 “保存 与 读 取 登 录用 户 名 与 密码 .html” 文 件 ， 代 码 如 下 : 
<!ldoctype html><html> 
<head> 
ZStyleS/ els 省 略 样式 代码 ， 详 见 本 书 网 络 资源 */</style> 
<script src="../js/jquery-1.8.3.js"></script> 
<!-- 本 例 依赖 于 jQuery --> 
</head> 
<body> 
<header><h2> 保 存 与 读 取 登录 用 户 名 与 密码 </h2></header> 
<section> 


<form action="" method="post"> 
<div class="clearfix first"> <!-- 去 除 输 入 框 默认 下 拉 提 示 --> 
<input type="text" tabindex="1"” id="name" class="item- 
name"” placeholder=" 了 昵称 " 


autocomplete="off" required/> 
<ul class="suggest"></ul> <!-- 下 拉 提 示 区 域 --> 
</div> 
<div class="clearfix"> <!-- 去 除 输 入 框 默 认 下 拉 提 示 --> 


<input type="password" tabindex="2" id="password" 
class="item-password" placeholder=" 密 码 " autocomplete="off" required/> 


</div> 
<div class="clearfix"><input type="submit" tabindex= 
"3"” id="submit" value=" 登 录 " /></div> 
</form> 
</section> 
</body> 
<script> 
var el name = $('#name'), // 昵称 输入 框 
el password = $('#password'), // 密码 输入 框 
el submit = $('#submit'), // 登录 按钮 
el suggest = $("'ul.suggest'), // 下 拉 提 示 容 器 
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28 el form = $('form'), // 表单 
29 storage key = "htm15 local'; // 缓存 key 
30 el suggest.on('click', function (e) { 
3 var target = $(e.target); 
32 el name.val (target.text ()); // 写 入 昵称 
33 el_password.val (target.attr('data-pass'));  // 写 入 密码 
34 ps 
35 el form.on('submit', function () { // 截取 表单 提交 保存 账号 密码 
36 var data = localStorage.getItem(storage key); 

// 获取 key 缓 存 内 容 
= data = data ? JSON.parse(data) : {}; 
38 data[lel name.val() .trim()] = el password.val().trim(); 

// 缓存 账号 和 密码 
39 localSstorage.setItem(storage key, JSON.stringify(data)); 

// 设置 缓存 
40 J 
41 Var storage data = localstorage.getItem(storage key), 

// 读 取 缓 存 
42 html_arr = []; // html 字 符 数组 
43 if (storage data) { 
44 storage data = JSON.parse (storage data); // 解析 为 对 象 
45 for (var key in storage data) { // 循环 缓存 对 象 
46 html arr.push('<li data-pass="' + storage data[key] + 
Mm key + "</T3>)s 
47 } 7 
48 el_suggest.html (html arr.join('')); // 设置 下 拉 框 结构 
49 el name.on({ 
50 ‘mousedown': function () { el suggest.fadeIn(); }, 
// 单 击 展 示 下 拉 框 
三 "blur': function () { el suggest.fadeOut(); } 
// 失去 焦点 时 隐藏 下 拉 框 

52 ]) 7 
53 ] 7 
54 </script> 
55 </html> 


10.1.3 代码 分 析 


本 例 的 存储 功能 使 用 HTML 5 的 LocalStorage 实 现 ， 代 码 第 29 行 的 
本 地 存储 的 缓存 键 值 。 
第 30 行 ~ 第 34 行 代码 ， 监 听 下 拉 提 示 列 表 的 单 击 事件 ， 当 用 户 让 


性 


变量 storage_key 被 用 寺 


EE 击 下 拉 框 内 账户 信息 


时 ， 从 对 应 的 账户 DOM 元 素 节 点 中 获取 昵称 和 密码 ， 了 昵称 为 元 素 内 本 文 节点 内 容 ， 密 码 为 元 


素 自 定义 属性 “data-pass” 的 值 。 
第 35 行 ~ 第 40 行 代码 ， 监 听 表 单 提 交 事 件 ， 当 用 户 单 击 “ 登 录 ” 按 


钮 提交 表单 内 容 ， 首 先 


调用 LocalStorage 的 getItem 方 法 获取 键 值 为 storage key 的 本 地 存储 的 内 容 ， 该 方法 语法 如 下 : 
localStorage .getItem(key) // 获取 键 值 为 key 的 值 ，key 为 字符 型 
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获取 完毕 后 ， 调 用 JSON 的 parse 方 法 将 字符 串 解 析 为 JavaScript 对 象 字面 量 ， 并 存 入 表单 
的 昵称 和 密码 数据 ， 然 后 调用 LocalStorage 的 setItem 方 法 进行 本 地 存储 ， 该 方法 语法 如 下 : 


localStorage.setItem (key, data); // key 为 键 ，data 为 值 ， 均 为 字符 型 
LocalStorage 存 储 的 对 象 必须 为 字符 型 ， 所 以 在 存储 前 ， 将 JavaScript 对 象 调用 JSON 的 
stringify 方 法 进行 字符 序列 化 。 


代码 41 行 ~ 第 53 行 做 了 两 件 事情 ， 首 先 获取 本 地 存储 的 昵称 和 账号 信息 生成 下 拉 提 示 框 
HTML 结构， 然后 监听 “昵称 ”输入 框 的 mousedown 和 blur 事 件 ， 实 现 提示 框 出 现 和 消失 的 逻辑 。 


10.2 示例 2 保存 与 读 取 临时 数据 


10.2.1 示例 效果 


本 例 将 使 用 HTML 5 的 SessionStorage， 为 第 9 章 中 的 “ 拖 放 图 标 .html” 示 例 添加 图 标 位 置 
记忆 功能 。 用 户 可 以 拖 虹 页 面 图 标 ， 即 使 刷新 页 面 ， 图 标 仍然 停留 在 拖 昂 后 的 位 置 ， 只 有 把 
页 面 关 闭 后 重新 打开 ， 图 标 才 重 置 回 原 位 。 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 10.4 所 示 。 随 意 拖 忠 页 面 上 各 个 图 标 ， 
效果 如 图 10.5 所 示 。 


图 10.4 使 用 Chrome 打 开 网 页 文件 图 10.5 拖 披 页 面 各 图 标 


按 F5 键 刷新 页 面 ， 图 标 仍然 停留 在 最 后 拖 史 的 位 置 ， 效 果 与 图 10.5 相 同 。 关 闭 该 页 
并 重新 打开 页 面 ， 图 标 被 重 置 为 原 位 ， 效 果 与 图 10.4 相 同 。 


10.2.2 代码 分 析 


拖 中 部 分 的 实现 代码 可 以 参考 “ 拖 放 图 标 ” 示 例 的 讲解 ， 本 例 关注 在 临时 数据 存储 这 
块 ， 下 面 看 看 具体 有 哪些 改动 。 


加 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 
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10.3.2 代码 设计 和 分 析 


本 例 引 用 第 三 方 类 库 jQuery 和 jQuery UI 来 简化 代码 的 开发 和 减少 代码 的 数量 。 首 先 ， 看 
逻辑 脚本 初始 区 代码 ， 代 码 如 下 : 


01 var DB NAME = 'html5 storage form test', // 数据 库 
02 item tpl = $('#J item') .html(), // 列表 中 的 单个 元 素 模板 
03 substitute = function (str, sub) { // 字符 串 格式 化 函数 
04 return str.replace(/\{(.+?)\}/g, function ($0, $1) 
{return $1 in sub ? sub[$1] : $0; 1}); 
05 } 
06 tbody = $('table.data tbody'), // 列表 容器 
// 打开 websQL 数 据 库 ， 不 存在 则 创建 
07 storageDriver = window.openDatabase (DB NAME, '1.0', 


'html5 storage table', 1048576); 


代码 第 01 行 ， 申 明 变 量 DB_NAME 并 赋予 值 “html5_storage_form _test”， 表 示 数 据 
库 名 称 。 第 03 行 ~ 第 05 行 ， 定 义 方法 substitute， 用 于 格式 化 字符 串 。 代 码 第 07 行 ， 使 用 
openDatabase 方 法 打开 一 个 本 地 数据 库 ， 如 果 数 据 库 不 存在 则 进行 创建 ， 语 法 如 下 ; 


window.openDatabase (name version,displayName,estimatedSize,DatabaseCallback) 


。 name: 数据 库 名 称 。 

。 version: 版 本 号 ， 目 前 版 本 均 为 1.0。 

。 displayName: 对 数据 库 的 描述 。 
estimatedSize: 数据 库 预 设 大 小 。 
DatabaseCallback: 回调 函数 ， 可 省 略 。 


接 下 来 ， 看 两 个 方法 add_item 和 del item， 分 别 用 于 向 列表 添加 和 删除 一 条 内 容 ， 代 码 如 下 : 


01 function add item(data, toDB) { // 添加 列表 项 、 数 据 库 
02 if (toDB) { 
03 storageDriver.transaction(function (t) { // 往 数据 库 插入 一 条 数据 
04 t.executeSql ("INSERT INTO " + DB NAME + " (name,sex,age) 
VALUES (?,23,2)7", 
05 [data.name, data.sex, data.age], // 传 入 保存 数据 
06 function (transaction, LesultSet) { 
07 data.id = resultset.insertId; // 获取 数据 库 返 回 的 自 增 ID 
08 tbody.append (substitute (item tpl, data)); 
// 添加 到 列表 
09 }，function () { alert(' 添 加 失败 '); }); // 错误 回调 函数 
10 Ds 
11 } else { tbody.append (substitute(item tpl, data)); }; 
// 添加 元 素 到 列表 
12 }:; 
13 function del item(target) { // 删除 一 条 数据 
14 storageDriver.transaction(function (t) { // 执行 删除 soL 
15 t.executesql ("delete from ”+ DB NAME + " where id=" + 
target.attr('data-id'), 
16 [], function () 1{ 
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下 水 target.closest('tr') .fadeOut () 7 
// 隐藏 元 素 

18 yn 

19 后 区 

20 1}; 


方法 add_item 接 收 两 个 参数 ， 第 一 个 用 于 传递 行内 数据 ， 第 二 个 用 于 决定 是 否 将 数据 存 
入 本 地 数据 库 。 代 码 第 03 行 ， 调 用 storageDriver 对 象 的 transaction 方 法 创建 一 个 事务 ， 该 方法 
语法 如 下 : 


database.transaction(callback,errorCallback, successCallback) 


。 callback: 事务 创建 成 功 后 ， 回 调 函数 返回 一 个 该 事务 对 象 。 
。 errorCallback: 事务 创建 失败 后 ， 回 调 函数 返回 一 个 错误 对 象 ， 可 选 。 
。 successCallback: 事务 创建 成 功 后 回调 ， 无 返回 数据 ， 可 选 。 


次 使 用 过 传统 数据 库 的 读者 对 事务 应 该 不 会 陌生 ， 事 务 是 以 执行 过 程 中 的 一 个 逻辑 为 单位 ， 可 以 
控制 一 系列 操作 。 想 了 解 更 多 的 事务 说 明 ， 详 见 网 址 http://zh.wikipedia.org/wiki/ 数 据 库 事 务 。 


代码 第 04 行 ~ 第 09 行 ， 调 用 事务 对 象 的 executeSql 方 法 执行 1 条 插入 功能 的 SQL 语句 ， 
executeSql 方 法 语法 如 下 : 


transaction. executeSql (sqlStatement, arguments, callback, errorCallback) 


。 sqlStatement: SQL 字 符 囊 。 

。 arguments: 传 入 给 SQL 字 符 囊 对 应 问号 处 的 参数 数据 ， 数 组 类 型 。 

。 callback: 执行 成 功 回调 ， 返 回 两 个 参数 ， 事 务 对 象 和 数据 结果 。 

。 errorCallback: 执行 失败 回调 ， 返 回 两 个 对 象 ， 事 务 对 象 和 错误 对 象 。 


其 中 的 第 07 行 代码 ， 获 取 返 回 结果 对 象 的 insertId 属 性 ， 并 存 入 数据 对 象 变量 data。 
insertId 为 成 功 插入 数据 库 后 ， 返 回 的 自 增 ID 字段 的 值 。 

方法 del_item 接 收 一 个 元 素 节点 参数 ， 用 于 执行 在 本 地 数据 库 中 删除 对 应 节点 ID 的 内 
容 ， 每 行 对 应 的 人 D 被 保存 在 自 定义 属性 data-id 中 。 

下 面 看 看 如 何 创建 列表 功能 所 需 的 数据 库 表 结 构 ， 代 码 如 下 : 


01 storageDriver.transaction(function (t) { // 启动 一 个 事务 生成 列表 
02 七 .executeSdl ("CREATE TABLE IF NOT EXISTS " + DB NAME + 

// 创建 数据 表 
03 " (id INTEGER PRIMARY KEY AUTOINCREMENT，"” +// 自 增 字段 
04 "name TEXT NOT NULL, " + // 姓名 字段 
05 "sex TEXT NOT NULL, " + // 性 别 字段 
06 "age INTEGER DEFAULT 0)"); // 年 龄 字段 
07 t.executesql ("SELECT * FROM " + DB NAME, [], // 读物 数据 表 
08 function (t, results) { 
09 for (var i = 0, 1 = results.rows.length; i < 1; i++) { 
10 add item(results.rows.item(i), false); // 生成 列表 
了 1 
12 Ds; 
3 HY 
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上 面 的 代码 一 共 执行 了 两 条 SQL 语句 ， 首 先 看 第 一 条 ， 用 于 创建 


户 信息 的 数据 表 ， 表 


结构 如 下 。 


。 id: 数值 型 的 自 增 主键 。 

。 name: 表示 昵称 ， 文 本 型 非 空 。 

。 sex: 表示 性 别 ， 文 本 型 非 空 。 

。 age: 表示 年 龄 ， 数 字 型 ， 默 认为 0。 


第 二 条 SQL 语句 ， 用 于 查询 数据 库 表 中 的 内 容 。 当 查询 成 功 后 ， 通 过 结果 对 象 results 的 
rows 属 性 返回 数据 ， 并 通过 调用 add_item 方 法 ， 在 列表 中 创建 行 元 素 结构 。 


继续 看 每 行 操作 区 域 删除 功能 的 实现 ， 代 码 如 下 : 


01 tbody.on('click', function (e) { // 监听 列表 单 击 事件 
02 Var target = $(e.target); 

03 if (target.hasclass('del')) { // 目标 元 素 为 删除 按钮 
04 e.preventDefault (); // 阻止 元素 默认 事件 
05 del item(target); // 删除 元 素 和 数据 库 内 容 
06 人 

07 1); 


为 了 避免 每 次 创建 列表 行 元 素 时 监听 对 应 删除 按钮 的 单 击 事件 ， 将 监听 事件 绑 定 到 列表 
的 tbody 元 素 上 ， 如 此 每 次 单 击 “ 删 除 ” 按 钮 ， 都 能 通过 事件 冒 泡 的 形式 向 外 传递 并 被 接收 。 
上 方 代码 第 03 行 ， 通 过 样式 类 名 中 是 否 含有 del 字 符 判 断 目 标 元 素 是 否 为 删除 按钮 ， 当 确定 


后 ， 调 用 “del_item” 方 法 ， 删 除 列表 和 数据 库 中 对 应 的 行内 容 。 
最 后 分 析 列 表 添 加 功能 的 实现 ， 代 码 如 下 : 


01 $('span.add') .on('click', function (e) { 


// 添加 操作 按钮 事件 


02 Var wraper = $($('#J form') .html())7 // 新 建 添加 弹 层 

03 $ (document .body) .append (wraper); // 注意 页 面 结构 

04 wraper.dialog({ 

05 position: 'center'，title: ' 添 加 '，modal: true， // 浮 层 配 置信 息 
06 buttons: [{ text: "确认 "， 

07 click: function () { 

08 Var name = wraper.find('input.name') .val(), // 姓名 值 
09 sex = wraper.find('select.sex') .val(), // 性 别 值 
10 age = wraper.find('input.age') .val (); // 年 龄 值 
hl if (name.length && sex.length && age.length) { 

12 add item({ name: name, sex: sex, age: age }, true); 
1a $ (this) .dialog ("close"); // 关闭 弹出 
14 } else { alert (' 请 正确 填写 所 有 填写 内 容 ') ; }; // 错误 验证 提示 
15 

16 }，{ text: "取消 "， 

jk click: function () { $(this) .dialog("close"); } // 关闭 按钮 事件 
18 | 

19 Ds 

20 wraper.dialog('open'); // 打开 弹出 框 
2 


代码 第 02 行 ~ 第 03 行 ， 获 取 页 面 中 浮 层 字符 HTML 模 板 ， 并 添加 到 页 面 DOM 结 构 中 。 
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代码 第 04 行 ~ 第 19 行 ， 使 用 jQuery UI 中 的 Dialog 组 件 初始 化 浮 层 元 素 ， 同 时 监听 确认 和 取消 
按钮 的 单 击 事件 。 在 确认 按钮 的 单 击 事件 中 ， 获 取 浮 层 中 “姓名 ”、“ 性 别 ”、“ 年 龄 ”这 三 
项 的 值 ， 判 断 如 果 均 不 为 空 的 情况 下 ， 调 用 add_item 方 法 添加 到 列表 并 且 存 入 本 地 数据 库 。 


查 _ 
| 芒 下 更 多 jQuery UI 的 Dialog 组 件 使 用 可 以 参考 网 站 http://iqueryui.com/dialog/。 


10.4 示例 4 桌面 提醒 工具 


10.4.1 示例 效果 


本 例 将 结合 Chrome 浏 览 器 Desktop Notification 功 能 和 HTML 5 本 地 存储 LocalStorage， 制 作 
桌面 消息 提醒 工具 。 设 计 该 工具 来 功能 时 ， 需 要 考虑 用 户 是 否 确 切 的 看 到 提醒 信息 。 这 里 假 
设 是 通过 单 击 桌 面 提醒 框 来 判定 该 条 提醒 已 被 阅读 ， 之 后 不 再 对 用 户 提醒 ， 并 且 刷 新 页 面 后 
对 应 的 提醒 告知 消失 。 反 之 ， 提 醒 框 在 3s 后 自动 消失 ， 则 认为 用 户 仍然 需要 提醒 ， 刷 新 页 再 
后 该 条 提醒 保留 。 

使 用 Chrome 浏 览 器 打开 网 页 文件 ， 列 表 信息 分 为 三 列 ;: “信息 ” 列 用 于 存放 桌面 提醒 框 
的 内 容 ，“ 时 间 间 隔 〈 秒 ) ”表示 提醒 框 出 现 的 时 间 间 隔 ，“ 距 下 次 提醒 时 间 〈 秒 ) ”是 一 
个 动态 更 新 变化 的 数值 ， 运 行 效果 如 图 10.10 所 示 。 


信息 HBH) FA 
各 不 信息 1 1 
站 信 四 2 a EE] 


图 10.10 使 用 Chrome 打 开 网 页 文件 


每 隔 ls，“ 距 下 次 提醒 时 间 ( 秒 〉” 列 数值 减 1， 当 数值 减少 至 0 时 ， 操 作 系 统 右 下 角 出 
现 提 醒 框 信息 ， 效 果 如 图 10.11 所 示 。 


提示 信息 1 


图 10.11 操作 系统 右 下 角 出 现 提醒 框 信息 


假使 不 单 击 出 现 的 提醒 框 ， 其 将 会 在 3 秒 以 后 消失 ， 列 表 中 对 应 的 第 三 列 计数 恢复 原 
值 ， 并 重新 开始 计时 ， 重 复 先前 的 效果 。 当 单 击 系统 右 下 方 出 现 的 提醒 框 时 ， 其 会 立即 消 
失 ， 列 表 对 应 的 第 三 列 停止 更 新 ， 值 始终 保持 为 0， 刷 新 页 面 后 列表 该 条 提醒 信息 消失 ， 效 
果 如 图 10.12 所 示 。 
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图 10.12 单 击 第 一 条 提醒 框 后 刷新 页 面 代码 设计 


10.4.2 代码 设计 和 分 析 


本 环节 将 针对 分 析 实现 脚本 逻辑 代码 ， 其 余部 分 读者 可 以 参看 本 书 网 络 资源 。 首 先 看 初 
始 执 行 脚本 ， 代 码 如 下 : 


01 var storage key = "notification msg", // 本 地 存储 缓存 键 值 
02 storage data = localSstorage.getItem(storage key); 
// 获取 本 地 存储 提醒 数据 
03 if (storage data) { 
04 storage data = JSON.parse (storage data); // 解析 字符 串 为 对 象 
05 } else { 
06 storage data = [{ msg: ' 提 示 信 息 1'，time: 10 }，{ msg: ' 提 示 信 息 2'， 
time: 20}]; // 默认 的 临时 提醒 数据 
07 localStorage.setItem(storage key, JSON.stringify(storage data)); 
// 缓存 默认 数据 
08 3}; 
09 renderList (storage data); // 构建 提示 列表 
先 申 明 一 个 变量 “storage_key” 并 赋予 自 定 义 键 值 “notification_ msg”， 再 通过 


LocalStorage 的 getItem 方 法 ， 获 取 该 键 值 本 地 存储 数据 。 当 页 面 为 首次 打开 时 ， 获 取 的 键 值 存 
储 数据 为 空 ， 此 时 添加 默认 数据 并 存 入 本 地 离线 存储 〈 见 代码 第 06 行 ~ 第 07 行 ) 。 当 再 次 进 
入 页 面 时 ， 将 键 值 获取 的 缓存 数据 解析 为 “JavaScript ”对象 并 赋予 storage_data 变 量 。 最 后 调 


下 


TrenderList 方 法 ， 构 建 提示 列表 和 执行 提醒 计时 器 。 


面 


看 renderList 方 法 ， 代 码 如 下 : 


function renderList(data) { // 构建 列表 
Var htmls = []; 
data.forEach (function (item, index) { 
item.id = index; // 给 提醒 数据 添加 索引 


htmls.push (substitute (item tpl, item) ) 7 
// 将 组 装 的 结构 添加 到 数组 变量 中 
item.interval = setInterval (function () { // 设置 计时 器 
var last; 
if (!item.ondisplay && !item.isremove) { 
// 非 显示 状态 和 非 移 除 状态 
// 获取 剩余 间隔 时 间 元 素 
last = document .querYySelector ('tr[data-idq="' + index + 
"nth ChilaAtan) 
time = ParseInt (last.innerHTML) - 1; 
// 计时 减 1 秒 


if (time === 0) { notification(item); } 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


JIHTML 5mmrzxtrfe -0 


storage_data 添 加 键 值 为 索引 值 和 值 为 商品 信息 的 数据 。 在 代码 第 15 行 处 ， 调 用 Storage 的 
setItem 方 法 将 增加 后 的 storage_data 对 象 数据 存 入 本 地 离线 缓存 ， 该 方法 语法 如 下 : 


Storage.setItem(key, data, isJSON); 


。 key: 表示 本 地 离线 缓存 的 键 值 
。 data: 数据 信息 ， 对 象 或 数组 
。 isJSON: 表示 是 否 获取 的 值 为 JSON 对 象 ， 布 尔 型 


最 后 在 购物 车 的 删除 事件 中 ， 完 成 清除 本 地 离线 缓存 对 应 商品 信息 ， 代 码 如 下 : 


delete storage datal[ltarget.attr('data-index')] 
Storage.setItem(storage key, storage data, true); 


10.6 示例 6 封 堵 数据 泄漏 


10.6.1 示例 效果 


笔者 经 常 在 网 上 订 酒 店 或 宾馆 时 ， 喜 欢 打开 多 个 浏览 器 标签 进行 综合 比 对 ， 想 从 中 选 
择 一 家 性 价 比 最 高 的 进行 预订 。 首 先 ， 被 挑 中 的 是 一 家 价格 适中 并 且 评 价 也 不 错 的 酒店 ， 此 
时 将 其 加 入 当前 标签 页 购物 车 并 准备 下 单 购 买 。 但 同时 在 另外 一 个 标签 页 中 发 现 一 家 价格 较 
低 但 评价 一 般 的 酒店 ， 由 于 笔者 手头 较 紧 想 省 点 钱 ， 遂 将 其 加 入 该 标签 页 购物 车 。 就 在 快 提 
交 的 时 候 反悔 了 ， 心 想 难得 订 一 次 ， 应 该 要 稍微 要 住 的 好 一 点 。 所 以 ， 又 切换 回 之 前 的 标签 
页 ， 并 提交 购物 车 内 容 。 情 况 出 现 了 ， 订 单 中 居然 出 现 的 是 价格 低 的 那 一 家 酒店 ， 这 种 情 
况 就 是 通常 说 的 “数据 泄漏 ”。 本 例 将 会 模拟 该 场景 的 发 生 ， 同 时 给 出 一 个 使 用 HTML 5 的 
SessionStorage 功 能 的 优化 方案 。 

将 示例 文件 放置 于 一 合 Web 服 务 器 上 ， 如 Apache 或 IS， 使 用 Chrome 浏 览 器 打开 文件 URL 
地 址 。 页 面 的 左 侧 是 采用 传统 Cookie 实 现 的 购物 车 ， 右 侧 是 采用 HTML 5 的 SessionStorage 功 
能 实现 的 购物 车 ， 运 行 效果 如 图 10.15 所 示 。 


Cookie SessionStorage 
购物 车 风 | 购物 车 EE 
¥98 ¥74 ¥98 ¥74 
宁夏 将 加 榨 杞 子 广西 特大 罗汉 果 宁 喜 桂 银 构 检 于 广西 持 大写 汉 音 


图 10.15 使 用 Chrome 打 开 网 页 文件 


404 


假设 刚刚 打 玫 


F 的 页 面 为 1 号 标签 页 ， 此 时 新 建 一 个 浏览 器 标签 打开 相同 示例 URL 地 址 
( 即 2 号 标签 页 ) 。 选 择 1 号 标签 页 的 左右 两 “购物 车 ”内 的 “宁夏 特级 枸杞 子 ”， 然 后 选中 


第 10 章 ”本 地 存储 大 演练 


2 号 标签 页 中 两 购物 车 的 “广西 特大 罗汉 果 ”， 效 果 如 图 10.16 和 图 10.17 所 示 。 
Cookie SessionStorage 
购物 车 


广西 特大 罗汉 果 


图 10.16 1 号 标签 页 


广西 特大 罗汉 果 


Cookie SessionStorage 
购物 车 则 到 | 购物 车 
¥98 ¥98 
宁夏 特级 构 杞 子 宁夏 特 织 构 忆 子 


图 10.17 2 号 标签 页 


此 时 ， 单 各 
夏 特 技 枸杞 子 ” 
10.18 所 示 。 


1 号 标签 页 内 Cookie 购 物 车 购买 按钮 ， 
” 变 为 “广西 特大 罗汉 果 ”， 并 弹出 


Cookie 


“广西 特大 罗汉 果 ,74” 


“ 


“数据 泄漏 ”产生 ， 选 中 的 结果 由 “ 宁 
提示 ， 效 果 如 图 


SessionStorage 


购物 车 


图 


¥74 


10.18 单 击 1 号 标签 页 内 Cookie 购 物 车 购买 按钮 


单 击 1 号 标签 页 内 SessionStorage 购 物 车 “购买 ”按钮 ， 提 示 信 息 与 选中 信息 维持 不 变 。 
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原 


不 难 发 现 ，Cookie 跟 着 域名 走 不 受 标签 的 限制 ， 而 SessionStorage 只 作用 于 当前 标签 。 


10.6.2 代码 设计 


本 例 有 主 次 页 面 两 块 构建 而 成 ， 之 间 通 过 iFrame 调 用 ， 主 页 面 代码 如 下 : 


<!ldoctype html><html> 

<head> /* 布局 样式 */ 
<style>section{float:left; margin-left:20px;} iframe{height:215px; 
width:260px}</style> 


</head> 
<body><header><h2> 封 堵 数据 泄漏 </h2></header> 
<section><h3>Cookie</h3> /* Cookie 版 购物 车 */ 
<iframe src="006.cookie-storage-cart.html?type=cookie"></iframe> 
</section> 
<section> 
<h3>SessionStorage</h3> /* SessionStorage 版 购物 车 */ 


<iframe src="006.cookie-storage-cart.html?type=storage"></iframe> 
</section></body></html> 


页 面 引 用 了 两 次 cookie-storage-cart.html 作 为 子 页 面 ， 区 别 在 于 传递 的 type 参 数 不 同 ， 
不 同 的 参数 会 触发 子 页面 不 同 的 逻辑 过 程 ， 下 面 看 子 页 面 的 逻辑 ， 代 码 如 下 : 


01 <!ldoctype html><html> 


02 <head> 
03 <style>header h2{ float:left;} header button{ float:right; }</style> 
04 <link rel="stylesheet" href="../css/cart.css" type="text/css" /> 
/* 购物 车 样式 包 */ 
05 <script src="../js/jquery-1.8.3.js"></script> /* 依赖 jQuery */ 
06 </head> 
07 <body> 
08 <header><h2> 购 物 车 </h2><button> 购 买 </button></header> 
09 <ul class="product-list">/* ...... 省 略 商品 列表 HTML 结 构 ， 详 见 本 书 
网 络 资源 */</ul> 
10 </body> 
11 <script> 
12 function getQueryYyString (name) { /* 获取 URL 参 数 数据 */ 
出 3 Var reg = new RegExp("(^|&)" + name + "=([^&]*) (&1S)"，" 
14 var r = window.location.search.substr(1) .match (reg); 
Ls if (r != null) return unescape(r[2]); return null; 
16 上 
地 function getCookie(sName) { /* 获取 指定 cookie 值 */ 
18 Var sRE= "(2:;7.)?2" + SName + "=([^;7]*);2", 
ORE= new RegExp (sRE); 
19 if (oRE.test(document.cookie)) return decodeURIComponent 
(RegExp["$1"]); 
20 else return null 
21 ] 
六 六 function setCookie(name, value) { /* 添加 Cookie */ 
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document .cookie = name + "=" + encodeURIComponent (value) 
path=/"> 
Ts 
var type = getQuerystring('type'), // URL 中 参数 type 的 值 
list items = $('1i.product'), // 商品 元 素 列 表 
btn buy = $('button'), // 购买 按钮 
cache key = 'select index'; // 缓存 键 值 
list items.bind({ // 绑 定 商品 列表 若干 事件 
'mouseenter': function () { $(this).addCclass('product-hover'); 
太 // 鼠标 移入 效果 增强 
"mouseleave': function () { // 移出 效果 消失 
Var self = $(this), checked = self.attr('checked'); 
// 获取 选中 状态 
if (!checked) self.removeClass('product-hover'); 
// 未 选中 时 触发 
}, 
'click': function () { 
list items.removeClass('product-hover'). 
removeAttr ('checked'); // 移 除 所 有 选中 效果 
$ (this) .addCclass('product-hover') .attr('checked', true); 
// 添加 当前 元 素 选 中 
var index = list items.index (this); // 获取 商品 的 位 置 索引 
if (type == "cookie') setCookie(cache key, index); 
// Cookie 方 式 存储 
else if (type == 'storage') sessionStorage.setItem 


(cache key, index); // sessionStorage 存 储 


] 2 


} 


btn buy.bind('click', function (e) { // 监听 购买 按钮 单 击 事件 
e.preventDefault (); // 阻止 默认 事件 
Var current select index, select item; 
if (type == 'cookie') { 


current select index = getCookie(cache key); 
// Cookie 方 式 获取 
} else if (type == 'storage') { 
current select index = sessionStorage.getItem(cache key); 
// sessionStorage 获 取 
}s 


if (current select index != null){ 
select item = list items.eq(current select index); 
select item.trigger('click'); // 触发 选中 效果 
if (!e.isTrigger) { // 手动 操作 触发 


alert(select item.find(’a').html() + '," + select item- 


find('strong') .html ()); 


TD 


}; 


btn buy.trigger('click'); // 初始 化 选中 状态 
</script></html> 
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10.6.3 代码 分 析 


主页 面 比 较 简 单 ， 包 含 了 两 个 iFrame 对 子 页 面 的 调用 ， 本 例 分 析 针 对 于 子 页 面 。 子 页 面 
包含 了 两 种 存储 和 获取 方式 ， 分 别 为 Cookie 和 SessionStorage， 方 式 的 选择 由 URL 传 入 的 type 
参数 控制 。 

代码 12 行 ~ 第 24 行 定义 了 三 个 工具 方法 getQueryString、getCookie、setCookie， 分 别 用 于 
获取 URL 指 定 参 数 的 数据 、 获 取 指 定 键 值 的 Cookie 数 据 、 设 置 指定 键 值 的 Cookie 数 据 。 

代码 29 行 ~ 第 49 行 ， 监 昕 商品 列表 元 素 的 mouseenter、mouseleave、click 事 件 。 监 听 前 两 
个 事件 是 为 了 实现 鼠标 移入 移出 标注 商品 的 效果 。 在 商品 元 素 的 click 监 听 事 件 中 ， 会 获取 选 
中 商品 在 列表 中 的 位 置 ， 通 过 URIL 传 递 的 type 人 参数 判断 进行 Cookie 或 者 SessionStorage 存 储 。 

代码 43 行 ~ 第 58 行 监听 购买 按钮 的 click 事 件 。 事 件 触发 后 ， 会 先 判断 URL 传 递 的 type 参 
数 ， 获 取 Cookie 或 者 SessionStorage 对 应 键 值 数据 ， 该 数据 值 即 为 之 前 被 选中 的 商品 序号 。 当 
商品 序号 存在 时 ， 通 过 该 序号 获取 对 应 的 商品 DOM 元 素 ， 触 发 该 元 素 选中 效果 ， 并 弹出 选中 
商品 相关 提示 信息 。 


10.7 示例 7 存储 数据 的 共享 


10.7.1 示例 效果 


HTML 5 本 地 离线 存储 给 开发 人 员 带 来 了 很 大 地 想象 空间 ， 本 例 将 采用 LocalStorage 实 现 
一 个 Web 版 PPT 展 示 器 和 控制 器 相 结 合 的 功能 。 示 例 一 共 由 两 张 页 面 组 成 ， 使 用 Chrome 浏 览 
器 新 建 两 个 标签 页 ， 分 别 打开 展示 页 和 操作 页 (“存储 数据 的 共享 .html” 和 “存储 数据 的 共 
享 操作 页 .html”) ， 运 行 效果 如 图 10.19 所 示 。 


论语 


图 10.19 使 用 Chrome 打 开展 示 页 和 操作 页 


[hu 
区 


(aT 


6 操作 页 面 “2” 区 域 ， 此 时 展示 页 切换 至 第 2 张 幻灯 片 ， 效 果 如 图 10.20 所 示 。 
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Efile://NE:/kli 三 -= Brile:///E:Adi 三 


存储 数据 的 共享 操作 页 


图 10.20 单 击 操作 页 面 “2” 


通过 前 面 示 例 的 学 习 ， 读 者 是 否 已 经 想 明白 了 该 示例 的 实现 方式 。 本 例 除了 采 
LocalStorage 实 现 外 ， 还 可 以 采用 传统 的 Cookie 方 式 实现 ， 但 就 Cookie 和 LocalStorage 在 平常 开 
发 技术 上 的 选 型 问题 ， 笔 者 认为 LocalStorage 有 两 个 优势 : 


。 LocalStorage 存 储 空间 达到 5MB， 而 Cookie 只 有 4KB。 
。 Cookie 会 随 每 次 页 面 请 求 被 发 送 至 服务 器 端 ， 消 耗 带宽 ， 而 LocalStorage 不 会 被 发 送 


至 服务 器 。 
Web 版 PPT 采 用 GitHub 上 开源 的 impress.js 项 目 ， 项 目地 址 : https://github.com/bartaz/ 
| impress.js。 


10.7.2 代码 设计 和 分 析 


本 例 是 一 个 偏 创 意 型 的 示例 ， 技 术 层 面 的 实现 非常 简单 ， 不 过 下 面 还 是 会 做 一 个 简要 的 
分 析 。 首 先 看 PPT 主 体 展示 页 面 ， 幻 灯 片 HTML 结 构 代 码 如 下 : 


<div id="impress"> <!-- 主 容器 --> 
<div class="step slide" data-x="-1000" data-y="-1500" > 
<!-- 第 一 章 幻灯 片 容 器 --> 
<q><h1> 论 语 </h1></q> <!-- 第 一 张 幻灯 片 内 容 --> 
</div> 


We 省 略 剩余 幻灯 片 ， 详 见 本 书 网 络 资源 */ 


</div> 


impress.js 项 目 默 认 的 主 容 器 ID 为 impress， 其 中 每 张 幻 灯 片 需要 含有 一 个 step 样 式 类 ， 同 
时 可 以 在 每 张 幻 灯 片 DIV 容 器 上 设置 data-x、data-y 等 自 定义 属性 ， 表 示 CSS 3 Transform 的 相 
关 动 画 设置 。 


主页 面 脚本 代码 如 下 ; 
var instance impress = impress(); // 获取 实例 对 象 
instance impress.init(); // 初始 化 幻灯 片 
setInterval (function () { 
var step = localStorage.getItem(' slide step '); // 获取 绥 存 幻灯 片 序号 
if (step) instance impress.goto(parseInt (step)); // 进入 第 step 张 幻灯 片 
}, 100); 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


QH ma 7 让 让 oo 用 | 


于 采用 原生 录入 的 关系 ， 可 以 看 到 “过 期 时 间 ” 一 栏 并 没有 信息 。 单 击 每 条 信息 后 方 
的 “删除 ”按钮 ， 清 空 列表 内 容 。 清 空 后 ， 单 击 “ 添 加 ”按钮 ， 出 现 输入 浮 层 并 录入 测试 信 
息 ， 效 果 如 图 10.24 所 示 。 


图 10.24 单 击 “ 添 加 ”按钮 


单 击 “确认 ”按钮 ， 浮 层 关闭 ， 列 表 中 出 现 对 应 的 录入 信息 ， 同 时 “过 期 时 间 ” 一 栏 出 
现 当 前 时 间 加 上 录入 秒 数 之 和 的 数值 ， 效 果 如 图 10.25 所 示 。 


© 本 有 
ms 全 过 其 时间 报 作 
test testvalue 2013/5/13 13:25:25 LL 


图 10.25 浮 层 录 入 信息 


“过 期 时 间 ” 表 示 该 条 信息 在 此 时 间 后 过 期 并 消失 。10s 后 单 击 “刷新 ”按钮 ， 列 表 显 示 
为 空 ， 过 期 数据 已 经 消失 。 


10.8.2 代码 设计 和 分 析 
完成 添加 本 地 离线 缓存 数据 过 期 功能 ， 外 链 脚本 如 下 : 


<script src="../js/jquery-1.8.3.js"></script> 

<script src="../js/jquery-ui-1.9.2.custom.js"></script> 
xaCriDE SEC /1S/localstorage. js"></script> 

<script src="../js/localstorage-expire.js"></script> 


其 中 localstorage-expire.js 是 对 localstorage.js 中 方法 的 覆盖 重 写 。 
下 面 分 析 具 体 的 逻辑 脚本 。 首 先 ， 初 始 化 相关 的 元 素 变 量 和 方法 ， 代 码 如 下 : 


var DB EXPIRE NAME = 'html5-storage-local-expire', // 过 期 缓存 键 
item tpl = $('#J item') -html()， // 列表 单个 元 素 模板 
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substitute = function (str, sub) { // 字符 串 格式 化 函数 
return str.replace(/\{(.+?2)\}/g, function ($0, $1) 
{ return $1 in sub ? sub[$1] : $0; }); 


}, 


tbody = $('table.data tbody'), // 列表 主体 
refresh = $('span.refresh'); // 刷新 按钮 


监听 弹出 浮 层 中 确认 按钮 的 单 击 事件 内 容 ， 代 码 如 下 : 


01 var key = wraper.find('input.key') .val(), // 键 值 

02 value = wraper-find('input.value') .val()， // 缓存 值 

03 expire = wraper.find('input.expire') .val(); // 过 期 时 间 ( 秒 ) 

04 if (key.length && value.length && expire.length) { 

05 Var 七 = new Date(); 

06 七 .setSeconds (t.getSeconds () + parseInt (expire)); // 获取 计算 后 的 过 期 时 间 

07 Storage.setItem(key, value, false, // 缓存 值 并 设置 过 期 时 间 

08 t.getFullYear() + '/' + // 年 

09 (t.getMonth() + 1) + /+ // 月 

10 t.getDate() + ! '+ oa 

11 t.getHours() + ':' + // 小 时 

12 七 .getMinutes () + ':' + // 分 钟 

TS 七 .getSeconds () ) 7 // 秒 

14 refresh.trigger('click'); // 触发 “刷新 ”按钮 单 击 事件 

15 $ (this) .dialog ("close"); // 关闭 弹出 

当 输入 完毕 后 ， 将 填写 的 秒 数 加 上 当前 的 时 间作 为 缓存 的 过 期 时 间 ，Storage 的 setItem 方 
法 的 语法 如 下 : 

Storage.setItem(key, value, isJSON, expire date); 

。 key: 缓存 键 。 


单 


value: 缓存 值 。 
isJSON: 是 否 存储 为 JSON 格 式 。 
expire_date: 过 期 时 间 。 


“刷新 ”按钮 ， 列 表 中 重新 展现 未 过 期 的 LocalStorage 数 据 ， 代 码 如 下 : 


01 refresh.on('click', function (e) { 


02 
03 
04 


05 
06 
07 
08 
09 
10 
i 


之 


var 


for 


length = localStorage.length， // 获取 Localstorage 缓 存 的 数量 
htmls = [], 

expire data = Storage.getItem(DB EXPIRE NAME, true); 

// 获取 过 期 缓存 键 中 的 数据 

(var i = 0; i < length; i++) { 


var key = localstorage.key (i)，// 获取 对 应 索引 的 缓存 键 名 


Value 
if (key != DB EXPIRE NAME) { // 判断 是 否 为 过 期 缓存 的 键 名 
value = Storage .getItem(key) 7 // 获取 缓存 数据 


if (typeof value != "undefined' && value !== null) { 
htmls.push(substitute (item tpl, { 
// 存储 行 HTML 结 构 至 数组 
key: keys 
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HTML 5 通信 大 演练 


本 章 将 介绍 HTML 5 带 来 的 两 种 新 通信 APIl， 跨 文档 消息 传输 和 
WebSockets 技 术 。 其 中 ，WebSockets 技 术 是 一 个 全 双 工 通信 信道 ， 开 
发 者 可 以 使 用 该 技术 开发 实时 的 、 事 件 驱动 的 Web 应 用 程序 。 本 章 的 示例 
将 会 带 着 读者 一 步 步 搭 建 各 种 场景 的 通信 应 用 ， 如 跨 文 档 的 数据 传输 、 基 于 
WebSockets 技 术 的 聊天 室 等 。 

本 章 知 识 点 : 


。 跨 文档 消息 传输 和 WebSockets 
。 微 博 消 息 实时 推送 

。 在 线 代码 编辑 器 

。 通过 WebSocket 创 建 聊 天 室 


1 全 1 示例 1 微 博 消息 实时 推送 


11.1.1 示例 效果 


HTML 5 提供 了 非常 方便 的 通信 机 制 ， 利 用 其 跨 文档 间 的 通信 可 以 非常 容易 地 实现 一 些 
业务 功能 。 本 示例 演示 利用 HTML 5 的 跨 文档 通信 功能 ， 实 现 微 博 页 面 的 实时 刷新 功能 。 
使 用 Chrome 浏 览 器 打开 “ 微 博 消息 实时 推送 -index” 网 页 文件 ， 运 行 效果 如 图 11.1 所 示 。 


棍 _ 
了 下 本 示例 程序 需要 通过 http://localhost 地 址 运行 。 


微 博 消息 实时 推送 


到 11.1 页 面 初始 化 


过 几 秒 钟 后 ， 页 面 显示 效果 如 图 11.2 所 示 。 


@、 |HTML 5 网 页 发 实 四 洋人 


所 _ 
[ss 


微 博 消息 详 时 推送 

aaaaaaaaaaazaaaaaaaaaaaa 
ffffffffffffffffffffffff 
bbbbbbbbbbbbbbbbbbbbbbbb 


图 11.2 微 博 实时 消息 


根据 运行 环境 不 同 ， 等 待 的 时 间 会 不 太一 样 ， 这 取决 于 程序 的 随机 计算 。 


11.1.2 代码 设计 与 分 析 


利用 编辑 器 打开 “ 微 博 消息 实时 推送 -index.html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 
为 主 文件 ， 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 


09 
10 
2 
下 之 
hi] 


14 


15 
16 
hy 
18 
ES 
20 
2 


到 又 
24 
25 
26 
2 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 微 博 消息 实时 推送 </title> 
<style type="text/css"> 
body{ 
margin:50px auto;width:400px;padding:20px;border:1px 
solid #c88e8e7 
border-radius: 15px; /* 设置 圆 角 */ 
height: 100%; 
1 
#weibolist{list-style: noney padding: 0;} 
#weibolist li{ background: #F3F3F3;line-height: 24px;height: 
24px;padding: S5px; width: 95%;} 
#weibolist li:nth-child(2n) {background: #fff;} 
/* 设置 微 博 列表 的 偶数 项 目 样式 */ 


#weibo-iframe{display: none;} /* 微 博 获 取 iframe 设 置 为 不 可 见 */ 
</style> 
</head> 
<body> 
<p> 微 博 消息 实时 推送 </p> 
<ul id="weibolist"></ul> 
<iframe id="weibo-iframe” src="001. 微 博 消 息 实 时 推送 -server .html"> 


</iframe> 
</body> 
<script> 
;7 (function (W) { 
Var doc = W.document; 
Var weibolist = doc.querySelector ("#weibolist"); 


var handler = function (weibo data){ // 处 理 新 的 微 博信 息 
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28 Var li = document.createElement ("1i"); 
2 li.innerText = weibo data; 
30 weibolist.appendChild (1i); // 把 微 博信 息 显 示 在 weibolist 控 件 中 
31 js 
32 // 监听 从 “ 微 博 消息 实时 推送 -server .html” 页 面 是 否 有 postMessage 请 求 
33 W.addEventListener('message', function(evt) { // message 事 件 代理 
34 if(evt.origin === 'http://192.168.3.100'){ 
// 判断 发 消息 的 来 源 是 否 正确 
as han+dler (evt .data); // 把 新 的 微 博 消 息 交 给 处 理 函 数 处 理 
36 下 
37 }, false); 


38 } (window)); 
39 </script> 
40 </html> 


I 力 下 这 是 本 示例 代码 的 第 一 个 文件 ， 该 文件 作为 程序 的 主 文件 。 


第 21 行 ， 引 入 微 博 消息 实时 处 理 的 Server 处 理 文 件 ， 即 第 二 个 文件 ， 如 无 特殊 说 明 ， 以 
下 称 此 文件 为 Server 辅 助 文件 。 因 为 要 获取 数据 ， 需 要 经 常 和 Server 通 信 ， 如 果 把 与 Server 进 
行 通 信 的 工作 交 给 主 文件 处 理 ， 那 么 主 文件 的 性 能 损耗 较 大 。 通 过 HTML 5 的 通信 机 制 ， 可 
以 通过 引入 Server 辅 助 文 件 。 当 Server 辅 助 文件 与 Server 通 信 后 ， 获 得 了 新 的 微 博 数据 ， 则 主 
动 通知 主 文件 有 新 的 微 博 消息 ， 需 要 主 文件 处 理 。 主 文件 、Server 辅 助 文 件 、Server 三 者 的 关 
系 如 图 11.3 所 示 。 


通知 需要 更 新 微薄 消息 - 主 文件 


是 否 有 数据 返回 


Server 畏 助 文件 


图 11.3 主 文件 、Server 辅 助 文件 、Server 三 者 关系 


代码 第 33 行 ， 监 听 Server 辅 助 文件 是 否 发 来 通知 ， 如 果 Server 辅 助 文件 发 出 通知 ， 则 触发 
主 文件 的 message 事 件 ， 然 后 执行 事件 的 回调 函数 。 


棍 window.addEventListener( “message”,callback) 是 HTML 5 中 新 增 的 事件 监听 方法 ， 可 以 接 
| 里 未 收 其 他 文档 通过 postMessage 发 来 的 消息 。 有 关 详 细 的 信息 可 参考 http://dev.w3.org/html5/ 
postmsg/。 


第 34 行 ， 判 断 消息 来 源 是 否 可 靠 ，message 事 件 代 理 中 的 参数 包含 两 个 重要 的 信息 ， 
origin 和 data。origin 保 存 了 消息 的 来 源 ，data 保 存 了 消息 的 消息 体 。 其 他 有 关 信 息 可 参考 http:// 
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dev.w3.org/html5/postmsg/。 
第 35 行 ， 如 果 通 过 了 来 源 检 测 ， 则 调用 处 理 函数 处 理 消息 。 
第 27 行 ~ 第 31 行 ， 是 具体 的 处 理 逻 辑 ， 读 者 可 根据 业务 自行 扩展 。 
利用 编辑 器 打开 “ 微 博 消息 实时 推送 -server.html”Server 辅 助 文件 ， 代 码 如 下 : 
01 <html> 
02 <head> 
03 </head> 
04 <body> 
05 <script type="text/javascript"> 
06 7 (function(){ 
07 // 模拟 的 数据 ， 真 实 环境 中 ， 数 据 可 以 从 服务 器 取得 
08 Var VirtualData = [ 
09 "aaaaaaaaaaaaaaaaaaaaaaaal'y 
10 "bbbbbbbbbbbbbbbbbbbbbbbb '， 
be ecccececececcecccecccececcececeecec 
12 "dddddddddddddddddddddddd' 
人 "eeeeeeeeeeeeeeeeeeeeeeeee ' 
14 四 中 中 中 吉 中 中 中 中 于 中 于 中 中 中 下 中 下 中 中 中 中 中 直 民 的 
T5 "gggggggggggggggggggggggg' 
16 JJ 
1% WR 
18 * 这 里 获取 是 否 有 新 的 微 博 信息 产生 的 逻辑 
19 * 如 果 有 ， 则 返回 微 博信 息 
20 * 如 果 没 有 ， 则 返回 nul1 
2 eof 
22 // 从 服务 器 获取 数据 。 此 函数 为 模拟 环境 ， 真 实 环境 请 从 服务 器 读 取 
23 Var getData = function(){ 
24 var index = Math.floor (Math.random() * 10) 7 
// 获取 模拟 数据 
[ee return virtualData[index] || null; 
// 如 果 数据 不 存在 ， 返 回 nul1 
26 时 
27 var aniloop = function(){ 
28 var randTime = Math .floor (Math.zandom() 
* 10000) 7 
29 setTimeout (function(){ 
30 var data = getData(); 
// 判断 是 否 有 新 微 博 消息 
证 if(data !== null){ 
// 判断 是 否 有 新 微 博 

32 // 发 消息 ， 通 知 父 页 面 有 新 消息 到 了 
33 window.parent .postMessage (data, 'http://localhost'); 
34 
35 aniloop(); 

// 在 下 一 阶段 继续 调用 处 理 程序 
36 }, randTime); 
37 lL 
38 aniloop(); 
39 }10); 
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40 </script> 

41 </body> 

42 </html> 

第 08 行 ， 为 了 模拟 Server 返 回 数据 ， 此 数据 为 伪造 。 

第 24 行 ~ 第 25$ 行 ， 随 机 获取 一 个 0~9 的 整数 index， 并 判断 virtualData 是 否 存在 index 的 索 
引 。 如 果 存 在 ， 返 回 其 值 ， 不 存在 返回 null。 

第 27 行 ， 定 义 了 一 个 轮 询 函 数 ， 轮 询 间 隔 为 1~10s。 

第 32 行 ， 如 果 有 微 博 更 新 ， 则 使 用 HTML 5 的 postMessage 向 windows.parent 〈 即 主 文件 ) 
发 消息 。postMessage 的 调用 对 象 为 window.parent， 即 主 文件 。 也 就 是 说 向 谁 发 消息 ， 需 要 获 
取 对 方 的 引用 。 该 方法 包含 2 个 参数 ， 第 1 个 参数 为 需要 发 送 的 内 容 ， 一 般 为 文本 ， 有 些 浏 览 
器 也 支持 对 象 、 数 组 等 。 第 2 个 参数 为 允许 的 发 送 源 。 


提 
| 区 二 postMessage 有 关 详 细 信 息 请 参考 http://dev.w3.org/html5/postmsg/。 


11,2 示例 2 在 线 代码 编辑 器 


11.2.1 示例 效果 


在 讲解 技术 或 者 做 内 部 分 享 时 ， 有 时 候 需 要 一 个 环境 去 运行 一 段 JavaScript 或 者 CSS 代 码 
等 ， 而 且 有 时 候 还 需要 现场 修改 代码 。 本 示例 设计 了 一 个 代码 实时 修改 ， 实 时 运行 的 页 面 ， 
支持 边 写 边 运行 看 效果 的 功能 。 

使 用 Chrome 浏 览 器 打开 “在 线 代 码 编辑 器 .html” 网 页 文件 ， 运 行 效果 如 图 11.4 所 示 。 


在 这 里 写 代码 运行 结果 


图 11.4 代码 编辑 器 初始 界面 


在 左边 文本 框 中 输入 代码 ， 如 下 ; 
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01 <html> 
02 <head> 
03 <style> 
04 body{background:#gray;} <!-- 设置 背景 色 为 红色 --> 
05 </style> 
06 </head> 
07 <body> 
08 <div id="demo"> 编 辑 器 的 代码 在 这 里 执行 </div> 
09 <script> 
10 Var body = document .querySelector ("body"); 
// 获取 body 
1 setTimeout (function(){ 
// 设置 2s 后 背景 变 成 蓝 色 
12 document .querySelector ("#demo"). 
innerHTML = "2s 后 执行 到 这 里 "; 
13 }, 2000); // 设置 定时 2s 执 行 回调 函数 
14 alert (" 边 写 边 练习 ， 2s 后 背景 变 蓝 色 ") ; // 测试 代码 是 否 运行 
15 </script> 
16 </body> 
17 </html> 


然后 单 击 “ 运 行 ” 按 钮 ， 运 行 效果 如 图 11.5 所 示 。 


localhost:8080 上 的 网 页 显示 : 
边 写 边 练习 , 两 秒 后 背景 变 蓝 色 


口 禁止 此 页 再 显示 对 话 框 。 


图 11.5 弹出 提示 语 


在 弹出 框 中 ， 单 击 “ 确 定 ”按钮 ， 过 2s 后 运行 效果 如 图 11.6 所 示 。 


运行 结果 


[| 开局 执行 到 这 里 


11.2.2 代码 设计 与 分 析 


图 11.6 运行 最 终结 果 


利用 编辑 器 打开 “在 线 代 码 编辑 器 .html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 代码 文 


件 ， 代 码 如 下 : 
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46 </script> 
47 </html> 


第 37 行 ~ 第 44 行 ， 获 取代 码 文件 框 <textarea id=”code_writing”> 的 值 ， 把 这 个 值 发 送 到 
windows.frames[0] 文 档 中 ， 即 发 送 到 “实现 代码 演示 示例 -runing.html” 文 档 中 。 

第 43 行 ， 使 用 postMessage 发 送 数据 ， 使 用 方法 请 参考 “ 微 博 消息 实时 推送 .html”。 

利用 编辑 器 打开 “在 线 代 码 编辑 器 -结果 .html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 结 
果 文件 ， 代 码 如 下 : 


01 <!DOCTYPE html> 

02 <html lang="en"> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 在 线 代 码 编辑 器 -结果 </title> 

06 </head> 

07 <body> 

08 </body> 

09 <script> 

10 var this html = document.querySelector("html"); 


i // 监听 “在 线 代码 编辑 器 .html ”页面 是 否 有 postMessage 请 求 
4 window.addEventListener('message', functionl(evt) { 
// message 事 件 代理 
TS if(evt.origin === 'http://localhost:8080'){ 
// 判断 发 消息 的 来 源 是 否 正确 
14 Var html = document.createElement ("htm1") 7 
// 创建 <html> 标 签 
15 Var data = "" + evt.data; 
// 将 evt .data 转 成 字符 串 
16 html .innerHTML = evt.data; 
// 设置 <chtml> 标 签 的 内 容 
Ey var _reg=/<script[^>]*>.*(?=<\/script>)<\/script>/gi; 
// 匹配 <script> 标 签 的 正则 表达 式 
18 data = data.replace( reg,""); 
// 替换 <script> 标 签 为 空 
ES Var scripts = html.getElementsByTagName ("script"); 
// 获取 传 过 来 的 所 有 <script> 
20 this html.innerHTML = data; 
// 替换 当前 页 面 的 HTML 的 内 容 
2 Var body = this html.querySelector ("body"); 
// 获取 当前 页 面 的 body 标 签 
2 if(_scripts.length){ // 判断 是 否 有 Javascript 语 句 
23 for(var i = 0, length = _scripts.length; 
i < length; i++){ 
24 Var script = document. 
createElement ("script"); 
2 if(_scripts[i].src){ 
大 大 Javascrip 是 外 部 引用 文件 
26 script.src = scripts[il].src; 
// 则 设置 其 src 属 性 
27 }else{ // 否则 设置 其 为 内 联 Javascript 
28 script.innerHTML = scripts([i]. 
innerHTML; 
0 
30 body.insertBefore (script); 
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// 把 <script> 标 签 插入 到 body 前 执行 


ED } 
二 2 } 

| } 

34 }, false); 


35 </script> 

36 </html> 

第 12 行 ， 设 置 message 事 件 代 理 ， 当 用 户 单 击 代码 文件 中 的 运行 按钮 时 ， 代 码 文件 页 面 
的 postMessage 函 数 将 把 当前 用 户 写 的 代码 发 送 到 结果 文件 中 。 结 果 文 件 通过 监听 message 事 
件 ， 可 以 获得 这 份 代码 。 

第 13 行 ， 为 了 安全 起 见 ， 需 要 判断 信息 来 源 是 否 正确 。 

第 14 行 ~ 第 32 行 ，message 事 件 的 处 理 程序 。 因 为 传 过 来 的 代码 是 字符 串 类 型 ， 所 以 可 以 
利用 innerHTML 属 性 将 其 转化 为 元 素 对 象 ， 见 第 14 行 和 第 16 行 代码 。 

第 19 行 ， 获 取代 码 里 的 script 标 签 。 如 果 直 接 把 script 标 签 放 入 到 文档 中 ， 其 JavaScript 代 
码 不 会 执行 ， 但 可 以 通过 getElementsByTagName 函 数 获取 到 所 有 的 script 标 签 。 

第 20 行 ， 删 除 结果 文件 的 HTML， 并 替换 成 用 户 写 的 HTML。 


抱 。 ”并 不 会 删除 结果 文件 中 已 经 存在 的 JavaScript， 也 就 是 说 ， 即 使 HTML 被 完全 替换 了 ， 但 当前 
ew 的 onmessage 事 件 代理 仍然 是 有 效 的 。 当 用 户 再 次 在 代码 文件 中 单 击 运行 按钮 时 ， 该 事件 处 
理 程序 仍然 会 被 执行 。 


第 24 行 ~ 第 29 行 ， 动 态 创建 script 标 签 ， 如 果 script 标 签 包含 src 属 性 ， 则 视 其 为 外 部 引用 ， 
否则 视 为 内 联 JavaScript。 
第 30 行 ， 把 script 标 签 插入 到 body 之 前 ， 然 后 JavaScript 代 码 开始 执行 。 


11.3 示例 3 在 iFrame 中 嵌入 
可 变 的 编辑 器 


11.3.1 示例 效果 


在 做 编辑 器 开发 中 ， 一 般 是 把 编辑 器 放 入 到 一 个 下 rame 中 ， 如 果 在 下 rame 中 改变 编辑 器 
的 大 小 ，iFrame 的 大 小 需要 随 之 改变 。 本 示例 演示 了 一 个 写 博客 文章 的 编辑 器 。 把 写 文章 的 
逻辑 放 到 一 个 下 rame 中 ， 当 iFrame 中 的 编辑 器 尺寸 改变 时 ，iFrame 也 随 之 改变 。 

使 用 Chrome 浏 览 器 打开 “在 过 ame 中 嵌入 一 个 可 变 大 小 的 编辑 器 .html” 网 页 文件 ， 运 行 
效果 如 图 11.7 所 示 。 
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这 里 是 页 面 上 的 其 他 内 容 


编辑 您 的 内 容 


选择 尺 二 700X400 1050X600 


图 11.7 将 发 布 文章 逻辑 嵌入 到 iFrame 中 


单 击 “700X400” 选 项 按钮 ， 运 行 效 果 如 图 11.8 所 示 。 
这 里 是 责 而 上 的 其 他 内 容 
a 


篇 组 你 的 内 容 


wey 350)200 REETEY :oscoxcoo 


图 11.8 改变 编辑 器 尺寸 


11.3.2 代码 设计 与 分 析 


利用 编辑 器 打开 “在 iframe 中 嵌入 一 个 可 变 大 小 的 编辑 器 .html” 文 件 ， 如 无 特殊 说 明 ， 
以 下 称 此 文件 为 主 文件 ， 代 码 如 下 : 


01 <!DOCTYPE html> 
02 <html> 
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03 
04 
05 
06 
07 
08 
09 
10 
Es 
12 
13 


14 
15 
16 
7 
18 
人 
20 
2 
bb 
23 
24 
25 
26 
2 
28 
pt 


30 
3 
32 


33 


34 
35 


36 


3 
38 
39 
40 
41 
42 
43 
44 
45 
46 


<head> 
<title> 在 iframe 中 嵌入 一 个 可 变 大 小 的 编辑 器 </title> 


<script src="../js/jquery-1.8.3.js"></script> 


<style> 
.invisible{display: none;} 
.iframe{ 
width:400px; 
height:390px; 
border:lpx solid #ccc; 
border-radius: Spx; /* iframe 边框 
—webkit-box-shadow:5px Spx rgba(0,0,0,.6); 
/* iframe 阴影 */ 
box-shadow:5px Spx rgba(0,0,0,.6); /* iframe 阴影 */ 
} 
</style> 
</head> 
<body> 
<p> 这 里 是 页 面 上 的 其 他 内 容 </p> <!-- 页 面 上 正常 的 内 容 --> 
<textarea class="invisible"> <!-- 设 置 文本 框架 不 可 见 --> 
<!--iframe 放 入 到 textarea 中 --> 


<iframe scrolling="no" class="iframe" frameborder="0" src="003 .在 
iframe 中 舱 入 一 个 可 变 大 小 的 编辑 器 内 容 页 .html"></iframe> 
</textarea> 
</body> 
<script> 
$ (function(){ 
var invisibles = $(".invisible"); // 获取 textarea 节 点 
var iframe = parseDom(invisibles.text()); 
// 将 textarea 中 的 1frame 转 化 成 DoM 
invisibles.replaceWith (iframe); // 把 textarea 替 换 成 iframe 
iframe = $("iframe"); // 获取 页 面 上 的 iframe 
window.addEventListener('message', functionl(evt){ 
// 监听 message 事 件 
var iframeOffset = evt.data || {}; 
// 获取 监听 到 的 数据 
iframe.css({ // 重新 设置 1frame 的 宽 与 高 
width: iframeOffset.width + 50, 
// 宽度 偏 移 50px 
height: iframeOffset.height + 190, 
// 高 度 偏 移 190px 
Ds; 
Ds; 
1D); 
function parseDom(arg) { // 将 字符 串 转 成 DoM 函 数 
Var objE = document.createElement ("div"); 
ObjE.innerHTML = arg; 
return objE.childNodes; 
] 7 
</script> 
</html> 
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35 </div> 
36 </form> 
37 </div> 


38 </body> 
39 <script> 


40 Var txt = $(".content"); // 获取 文章 内 容 控件 
41 $(".slt") -bind("click"，function(){ // 绑 定 文本 框 尺 寸 的 单 击 事件 
42 var cat = this.dataset.cat; // 获取 当前 所 选择 的 尺寸 序号 
43 var offset = { // 计算 当前 的 文本 框 大 小 
44 WwWYQERESELCatA 3507 
45 hosgnE .se Sat 200 
46 }; 
47 $(".slt") .removeClass ("selected")  // 取消 所 有 尺寸 选择 的 选中 状态 
48 $ (this) .addClass ("selected"); 
// 把 当前 选择 的 尺寸 设 为 选中 状态 

49 txt.css (offset); // 设置 文本 框 的 新 尺寸 
50 window.parent .postMessage (offset, '*'); 

// 把 当前 新 的 尺寸 通知 给 主 文件 页 
51 1}); 
52 </script> 
53 </html> 


第 14 行 ， 在 本 示例 中 ， 因 为 不 处 理 后 端 数据 ， 所 以 在 onsubmit 事 件 中 使 用 return false 处 
理 ， 防 止 表 单 提交 。 

第 24 行 ~ 第 26 行 ， 是 三 种 编辑 框 的 尺寸 ， 供 用 户 选择 ， 分 别 是 350 X200、700 X400、 
1050X600。 

第 30 行 ， 文 本 编辑 器 控件 。 用 户 选择 编辑 器 尺寸 后 ， 该 控件 的 大 小 会 随 着 变化 。 

第 42 行 ， 获 取 用 户 选 择 的 尺寸 类 型 ， 其 包含 在 dataset 的 cat 属 性 值 中 。 

第 43 行 ~ 第 46 行 ， 计 算 当 前 选择 的 编辑 器 的 实际 尺寸 ， 宽 度 为 当前 cat 值 与 350 乘 积 ， 高 度 
为 当前 cat 值 与 200 乘 积 。 

第 47 行 ~ 第 49 行 ， 用 户 选 择 尺寸 类 型 后 ， 先 设置 当前 选中 状态 ， 在 把 当前 编辑 器 的 宽 与 

第 50 行 ， 因 为 该 页 面 被 嵌入 在 一 个 iFrame 中 ， 所 以 当 编 辑 框 的 尺寸 改变 后 ，iFrame 的 宽 
与 高 还 是 固定 的 ， 导 致 编辑 器 显示 不 全 或 者 外 边框 过 大 ， 该 行 代码 把 当前 用 户 选择 的 结果 通 
过 postMessage 发 送 给 主 文件 进行 iFrame 宽 与 高 的 重新 设置 。 


11.4 示例 4 预览 网 站 内 容 


11.4.1 示例 效果 


在 新 闻 阅 读 类 网 站 中 ， 经 常 需要 处 理 的 一 个 场景 是 把 新 闻 信 息 嵌 入 到 一 个 下 rame 中 供 
户 阅 读 详 细 的 新 闻 。 而 这 种 情况 一 般 的 处 理 流程 是 跳 到 一 个 新 的 页 面 ， 本 示例 通过 HTML 5 的 
postMessage 通 信 ， 可 以 不 用 跳 转 ， 而 是 直接 在 当前 页 面 新 开 一 个 页 面 ， 供 用 户 阅 读 。 
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使 


Chrome 浏 览 器 打开 


淘宝 网 标题 链接 ， 运 行 效果 如 图 


单 击 左 侧 “ 关 闭 ” 按 钮 ， 如 


11.4.2 代码 设计 与 分 析 


利 
代码 如 下 : 
01 <!DocTYPE html> 


必 电子 书 全 球 购 


名 生活 mg 
彩票 电影 票 保险 转账 
水 电 煤 理财 淘宝 生活 


雹 互动 
随便 亚 赴 海 女郎 U 站 
淹 公 仔 淘宝 天 下 


人 
变形 会 风 A 
Ee 


“A 


大 导演 克 家 项 革 六 入 的 加 入 
天 痢 Tnaucon 精 先 品牌 特卖 -都市 休 评 
端午 特惠 99 元 抢购 没有 品味 


到 11.10 预览 网 站 具体 内 容 


到 11.11 所 示 ， 页 


区 


辕 
器 


到 图 11.9 所 示 状 态 。 


时 手机 版 ” 亲 ， 欢迎 来 淘宝 ! 


淘宝 网 


Taobao.com 


于 锯 于 


11.11 单 击 “ 关 闭 ” 按 钮 


“预览 网 站 内 容 .html” 网 页 文件 ， 运 行 效果 如 图 11.9 所 示 。 
选 +《 握 周刊 : 互联 网 创业 必 读 》#126 | 36 揽 
图 11.9 新 闻 列 表 
11.10 所 示 。 
蓝 手 机 版 | 灯 ， 欢迎 来 淘宝 ! 请 登录 免责 主 朋 俱乐部 我 要 捞 
人 天 笑 店 清 
淘宝 网 
Taobao.com - 
祖 百 按 T 册 京 鞋 夏 
天 甘 。 聚 划算 ”电器 城 。 超市 。 一 淘 网 。_Hitao 委 扮 
ed 性 女 卫 夫 


编辑 器 打开 “预览 网 站 内 容 .html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 
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02 
03 
04 
05 
06 


07 
08 
09 
10 
LE 
12 
13: 
14 
15 
16 


ry 
18 


19 


20 
2 
22 
2 
24 
25 
26 


27 
20 
2 
30 
3 下 


32 
33 
34 
35 
36 


37 
38 


39 
40 


41 


42 


<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 预 览 网 站 内 容 </title> 
<script type="text/javascript" src="../js/jquery-1.8.3.js"> 
</script> 
<style type="text/css"> 
// 样式 内 容 见 代 码 源 文件 
</style> 
</head> 
<body> 
<div class="news"> 
<!-- 新 闻 列表 --> 
<div class="clist clearfix"> 
<div class="clist-center clist-noavatar"> 
<h3><a href="http://taobao.com/" class= 
"item"” target=" blank"> 淘 宝 网 </a></h3> 
<div class="clist-con"> 
<a href="http://taobao.com/ 
" class="item" target=" blank">www.taobao.com</a> 
<span>gnbsp’; gnbsp;-&nbsp; 
</span> 淘宝 网 
</div> 
</div> 
</div> 
<!-- 更 多 阅读 列表 见 代码 源 文件 --> 
<!--// 新 闻 列 表 end--> 
</div> 
<iframe src="004.preview.html" id="iframe"></iframe> 


<!-- 预 览 页 面 --> 


</body> 
<script> 
$ (function(){ 
Var body = document .querySelector ("body"), // 获取 body 控 件 
iframe = document .querySelector ("#iframe"), 
// 获取 iframe 控 件 
win = iframe.contentWindow; // 获取 iframe 的 document 
$(".item") .on("click", function(e){ // 绑 定 每 一 个 新 闻 标题 的 单 击 事件 
e.stopPropagation(); // 阻止 事件 骨 泡 
e.preventDefault (); // 阻止 事件 的 默认 行为 
// var style = window.getComputedstyle (iframe); 
// 获取 iframe 的 样式 对 象 
// 设置 样式 
body.style.height = document .documentElement. 
clientHeight; 
iframe.style.display = 'block'; 
iframe.style.height = (document.documentElement. 
clientHeight - 15) + 'px'; 
Var width = (document .documentElement.clientWidth - 50) 
二 让 人 
win.postMessage ({ // 发 送 消息 给 iframe 
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"> 收藏 </a> 

了 3 <a href="javascript:;"” onclick="alert(' 请 自己 扩展 此 功能 ') ; 
"> 评论 </a> 

14 <a href="javascript:;"” id="close"> 关 闭 </a> 

15 </p> 

16 <iframe src="" id="iframe"></iframe> <! 一 加 载 第 三 方 的 内 容 > 

17 </body> 


18 <script> 
19 ; (function (W){ 


20 Var doc = W.document; 
21 Var parent = window.parent; 
22 Var iframe = document .querySelector ("#iframe™"); 
23 Var close = document .querySelector ("#close") 7 
24 window.addEventListener ('message'!，function(evt) { 
// 监听 message 事 件 

25 iframe.src = evt.data.href; // 设置 iframe 的 src 
26 iframe.style.height = evt.data.height; // 设置 iframe 的 高 度 
27 Iframe .style.width = evt.data.width; // 设置 iframe 的 宽度 
28 // console.logl(evt.data); 
29 }, false); 
30 close.addEventListener ("click", function(){ 
3 window.parent .postMessage ("closed", "*"); 

// 发 送 “ 关 闭 详情 页 面 ”动作 
}, false); 
Ba // 当 文 档 加 载 完毕 ， 给 父 级 来 源 发 送信 息 。 
34 window.addEventListener('load', function(e){ 
35 window.parent .postMessage ("ready", "*"); 

// 告诉 主页 面 “ 已 经 准备 好 ”， 可 以 向 我 发 消息 
36 }, false); 


37 } (window)); 

38 </script> 

39 </html> 

第 13 行 ~ 第 15 行 ， 详 情 页 面 的 动作 控件 页 面 ， 本 示例 模拟 了 关闭 动作 。 

第 24 行 ~ 第 29 行 ， 监 听从 主页 面 发 来 的 信息 。 一 旦 收 到 主页 面 发 来 的 信息 ， 立 即 执行 ， 
并 设置 iFrame 的 src 属 性 、 宽 度 和 高 度 。 

第 30 行 ， 监 听 动 作 面 板 的 关闭 事件 ， 并 通知 主页 面 做 关闭 操作 。 


加 


11.5 示例 5 定时 给 客户 发 消息 


11.5.1 示例 效果 


本 示例 模拟 微 博 系统 中 不 刷新 页 面 的 新 消息 提醒 。 一 般 的 微 博 采 用 Ajax 技术 进行 HITP 轮 
询 判 断 是 否 有 新 的 微 博 消息 。 本 示例 采用 EventSource 技 术 ， 建 立 5 个 长 连接 ， 如 果 有 新 消息 
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@ |HTML 5 网 页 下 发 实 四 洋人 


来 ， 则 对 用 户 进 行 提醒 。 


FE 运行 本 示例 必须 在 客户 端 安装 Node.js，Node js 是 一 个 跨 平台 的 基于 V8 引 擎 的 JavaScript 编 译 


器 ， 具 体 可 参考 http-//nodejs.org。 


在 本 地 创建 数据 库 html5， 创 建 表 名 为 “demo_12 5”， 数 据 库 脚本 如 下 : 


CREATE DATABASE htm157 
USER html5; 
CREATE TABLE ‘demo 12 5 ( 


id” int(11) NOT NULL AUTO INCREMENT, // 索引 序号 
‘msg™ text NOT NULL, // 消息 

“addDate. timestamp NOT NULL DEFAULT CURRENT TIMESTAMP, // 添加 时 间 
“isRead’ tinyint(1) DEFAULT '0', // 是 否 已 读 


PRIMARY KEY (~ id ) 
) ENGINE=InnoDB AUTO INCREMENT=13 DEFAULT CHARSET=utf8; 


在 命令 行 模式 下 ， 使 用 Node 命 令 运行 “005.serverjs” 文 件 ， 命 令 行 如 下 : 


node 005.server.js 


运行 效果 如 图 11.12 所 示 。 


图 11.12 启动 Nodejs 服 务 


查 _ 
| 臣下 。 如果 运行 失败 ， 有 可 能 是 机 器 的 端口 被 占用 ， 请 在 网 络 资源 中 更 改 端口 号 。 


使 用 Chrome 浏 览 器 打开 http://localhost:8000 地 址 ， 运 行 效果 如 图 11.13 所 示 。 


这 里 是 微 沽 内 容 ， 此 处 内 容 仅 做 演示 使 用 


进入 后 台 添加 消息 


图 11.13 无 未 读 消息 时 的 状态 


单 击 进入 后 合 添加 消息 按钮 ，Chrome 浏 览 器 新 打开 一 个 标签 页 ， 运 行 效果 如 图 11.14 
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图 11.14 模拟 添加 微 博 消息 界面 


在 文本 框 中 输入 一 则 消息 “测试 消息 ”， 单 击 “ 提 交 ” 按 钮 。 运 行 效果 如 图 11.15 所 示 。 


在 Chrome 浏 览 器 返回 “定时 给 客户 发 消息 ”标签 页 面 ， 可 以 看 到 页 面 项 部 


图 11.15 模拟 微 博 消息 成 功 


现 了 “有 1 


条 新 消息 ”的 提示 ， 如 图 11.16 所 示 。 


担 _ 
LE 


RN 


这 里 是 微薄 内 容 ， 此 处 内 容 仅 做 演示 使 用 


进入 后 台 添加 消息 


图 11.16 后 人 台 检 测 到 有 新 消息 ， 并 将 其 推送 到 前 台 提 醒 


读者 可 以 继续 到 “模拟 添加 微 博 消息 后 台 ” 页 面 ， 添 加 更 多 的 消息 ， 在 切换 回 “ 定 时 给 客户 
发 消息 ”页 面 ， 查 看 是 否 有 新 的 微 博 消息 提醒 。 


11.5.2 代码 设计 与 分 析 


利 


01 
02 
03 
04 
05 


编辑 器 打开 “serverjs” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 Server 文 件 ， 代 码 如 下 : 


var config = { // 配置 文件 
db: { 
host : 'localhost', // 数据 库 连 接地 址 
user : ‘root', // 数据 库 用 户 名 
password: 'root', // 数据 库 密码 
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CGIHTML sma > =Q—S. wy!(,——”— ”Ss”, . 


06 database: 'html5' // 数据 库 名 

07 }, 

08 port: 8000 // 服务 端口 号 

届时 区 

10 var http = require('http'); // HTTP 模块 

11 var sys = require('sys'); // 系统 模块 

12 Var f= FOquire(lr ts) // 文件 系统 模块 

13 var mysql = require('mysql'); // 数据 库 连接 模块 

14 var url = require('url'); //_URL 解 析 模 块 

15 Var connection = mysql.createConnection (config.db); 
// 创建 数据 库 连接 

16 connection.connect(); // 连接 数据 库 

17 http.createServer (function(req, res) { // 创建 http server 

18 if (req.headers.accept && req.headers.accept == 
"text/event-stream') { 

19 EE (reqstri == noOE3CeE { // 判断 请 求 的 URL 

20 res.writeHead(200, { 

2 'Content-Type': 'text/event-stream', 

区 "Cache-ContIrol': 'no-cache', 

pr} 'Connection': 'keep-alive' 

24 Ds 

25 loop(req, res); 

26 } else { 

wd console.1og('404°'); 

28 res.writeHead (404); 

29 res.end(); 

30 | 

31 } else if(req.url == '/admin'){ // 后 台 模 拟 添加 消息 

32 res.writeHead(200, {'Content-Type': 'text/html'}); 

33 res.writel(fs.readFileSync(_ dirname + '/005.admin.html')); 

// 载 入 admin.html 文 件 

34 res.end(); 

35 } else if(req.url.indexof('/addmsg') !== -1 ){ // 添加 消息 处 理 

36 var url parts = url.parse(req.url, true); // URL 解 析 

37 var query = url parts.query; // 获取 参数 

38 res.writeHead(200, {'Content-Type': 'text/html'}); 

39 if(query.msg){ 

40 var msg = {msg: query.msg}; // 获取 消息 内 容 

41 // 插入 数据 到 数据 库 中 

42 connection.query("insert into demo 12 5 set 2", 
msg, function(err, result){ 

43 console.log (result); 

44 res.write ("添加 成 功 ， <a href='/'> 返 回首 页 </a> 
或 者 <a href='/admin'> 继 续 添加 </a>") 7 

45 res.end(); 

46 Ds 

47 }else{ // 添加 失败 逻辑 

48 res.write ("添加 失败 ， <a href='/admin'> 重 新 添加 </a>"); 

49 res.end(); 

50 } 

Si } else { // 默认 页 面 (首页 》 
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5 之 
3 


54 
55 
56 
5 


58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
这 下 
72 


73 
74 
75 
76 


了 
78 
79 
80 
81 
82 
83 


res.writeHead(200, {'Content-Type': 'text/html'}); 
res.write (fs.readFileSync( dirname + '/005. 定 时 给 客户 发 


消息 .htm1')); 


res.end(); 


人 


}) .listen (config.port); 


console.log('listen on http://localhost:' + config.port); 


// 在 控制 台 输出 端口 号 


function loop(req, res){ // 后 台 轮 询 函 数 


} 


getMoreSMS (res, function(data){ // 查看 是 否 有 新 消息 
sendssE (req, res, data); // 通知 客户 端 有 新 消息 
Ds; 
// 在 一 个 长 链接 中 每 隔 10s 服 务 端 进行 事件 推送 到 客户 端 
setInterval (function() { 
getMoreSMS (res, function (data) { 
sendssE(req, res, data); 
]) 7 
}, 10000); 


function sendSssE(req, res, data) { 


} 


var id = (new Date()).toLocaleTimeSstring(); // 获取 当前 的 时 间 戳 
res.write('id: ! + id + '\n'); // 发 送 时 间 戳 
res.write("data: " + JSON.stringify(data) + '\n\n'); 


// 发 送 数 据 (JsoN 格 式 化 》 


function getMoreSMS (res, callback){ 


| 


// 查询 数据 库 ， 查 找 所 有 未 读 的 消息 


connection.query('SELECT id, msg, addDate from demo 12 5 where isRead 
0', functionl(err, rows,fields) { 


if (err || !rows.length) { 
console.1log('errors'); 
}elsef 
callback (rows); 
} 
| 


代码 第 01 行 ~ 第 09 行 ， 为 服务 器 的 配置 文件 ， 配 置 数 据 库 的 信息 和 服务 启动 的 端口 号 ， 
第 03 行 ~ 第 06 行 分 别 是 数据 库 连 接地 址 、 数 据 库 用 户 名 、 数 据 库 密码 、 数 据 库 名 。 第 08 行 为 
服务 启动 的 端口 号 。 


所 _ 
| 国 下 。 如 果 服 务 启动 时 ， 提 示 端 口号 被 占用 ， 需 要 在 第 08 行 修改 成 一 个 未 被 使 用 的 端口 号 。 


第 10 行 ~ 第 14 行 ， 包 含 本 示例 需要 用 到 的 Nodejs 模 块 。 
第 15 行 ~ 第 16 行 ， 创 建 一 个 数据 库 连 接 实例 ， 数 据 库 连 接 类 库 采 用 的 是 node-mysql。 


查 _ 
I 力 下 更 多 关于 node-mysql 的 信息 请 参考 GitHub 开 源 项 目 https://github.com /felixge/node-mysql。 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 
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oh var data = JSON.parse(e.data), // 解析 服务 器 推送 过 来 的 数据 
ba newMsgNum = data.length; // 计算 新 消息 数据 
人 23 msg.style.display = "block'7 // 显示 消息 区 域 
24 msg.innerHTML = "有 "+ newMsgNum + "条 新 消息 "; 
// 打印 消息 数量 
这 }: false); 
26 source.addEventListener('open'，function(e) { // 监听 事件 源 打 开 时 
27 console.log('open'); 
28 }, false); 
29 source.addEventListener('error'，function(e) { // 监听 事件 源 错 误 时 
30 console.log('error'); 
出 if (e.readyState == EventSource.CLOSED) { // 如 果 事 件 源 连接 被 关闭 
32 console.log('Connection was closed'); // 打印 出 事件 已 经 被 关闭 
3 i 
34 }: false); 
35 Jelsef{ 
36 alert (' 您 的 浏览 器 out 了 ! '); // 浏览 器 不 支持 EventSource 
二 下 
38 </script> 
39 </html> 
代码 第 08 行 为 新 消息 提醒 区 域 ， 如 果 消 息 数 小 于 0， 黑 认 不 显示 ， 当 未 读 消息 数 大 于 0 时 
显示 未 读 消息 数 。 


第 10 行 ， 微 博信 息 列表 区 域 。 在 该 示例 中 ， 微 博 消 息 列表 不 是 本 示例 的 核心 ， 所 以 采用 
区 域 代 替 ， 读 者 可 根据 实际 情况 填充 。 

第 11 行 ， 后 台 添 加 模拟 消息 的 入 口 ， 因 为 是 模拟 消息 列表 ， 所 以 该 入 口 在 实际 环境 中 并 
不 存在 。 

第 14 行 ， 判 断 浏览 器 是 否 支持 EventSource 技 术 。 

第 15 行 ， 实 例 化 EventSource。 参 数 设 置 为 “/notice”， 是 告诉 服务 器 的 请 求 地 址 为 “/ 
notice”， 对 应 “server 文 件 ” 的 第 19 行 程序 逻辑 。 

第 17 行 ~ 第 19 行 ， 监 听 用 户 单 击 未 读 消息 数 的 按钮 ， 该 示例 并 未 扩展 如 何 清除 未 读 消 
息 ， 请 读者 结合 实际 环境 进行 清除 。 

第 20 行 ~ 第 25 行 ， 监 昕 服务 器 端 发 来 的 消息 ， 如 果 服 务 器 端 发 来 新 消息 ， 表 明 有 新 的 未 
读 消息 ， 程 序 重新 统计 未 读 消息 数 。 第 24 行 ， 把 新 的 消息 数 显 示 在 新 消息 提醒 区 域 上 。 

第 26 行 ， 监 昕 事件 打开 状态 。 当 服务 端 与 客户 端 建立 起 连接 时 ， 可 以 通过 open 事 件 做 一 
些 逻 辑 处 理 。 

第 29 行 ， 监 听 事 件 的 错误 状态 。 当 服务 端 与 客户 端 建立 连接 发 生 错误 时 ， 该 事件 被 调用 。 

利用 编辑 器 打开 “admin.html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 后 全 模拟 消息 文 
件 ， 代 码 如 下 : 

01 <!DOCTYPE html> 

02 <html> 

03 <title> 定 时 给 客户 发 消息 </title> 

04 <style> 


05 // 样式 见 代码 源 文件 
06 </style> 
07 <body> 


@. |HTML 5 网 页 开发 实例 详解 


08 <div class="admin"> 

09 <a href="/"” class="back"> 返 回首 页 </a> 

10 <p> 模 拟 其 他 用 户 添加 一 则 微 博 消息 </p> 

11 <form id="msgform" method="GET" action="/addmsg"> 
<!-- 添 加 消息 表单 --> 

2 <input type="text" id="msg" name="msg" /> 
<!-- 添 加 消息 文本 输入 框 --> 

13 <br /> 

14 <input type="submit" value=" 提 交 " /> <!-- 提 交 按 钮 --> 

15 </form> 

16 </div> 


17 </body> 

18 </html> 

第 11 行 ~ 第 15 行 ， 定 义 了 添加 模拟 消息 的 表单 ， 该 表单 提交 到 “/addmsg” 请 求 上 ， 对 应 
“server 文 件 ” 的 第 35 行 执行 程序 。 


11.6 示例 6 通过 WebSocket 创 建 聊 天 室 


11.6.1 示例 效果 


本 示例 开发 一 个 聊天 系统 ， 客 户 端 采 用 HTML 5 的 WebSocket 技 术 ， 服 务 端 采用 Nodejs 拱 
建 一 个 支持 WebSocket 功 能 的 服务 器 。 


运行 本 示例 必须 在 客户 端 安装 Node.js，Node.js 是 一 个 跨 平台 的 基于 V8 引擎 的 JavaScript 编 译 
a 示 ”器 ， 具 体 可 参考 http://nodejs.org。 


运行 本 示例 程序 ， 需 要 先 安装 Node.js 依 赖 的 WebSocket 包 ， 在 命令 行 模式 下 进 
入 本 示例 的 录 ， 然后 运行 如 下 命令 : 


npm install 


在 命令 行 模式 下 ， Node.js 命 令 运行 “app.js” 文 件 ， 命 令 如 下 : 


node app.js 


运行 效果 如 图 11.17 所 示 。 


到 11.17 启动 Node.js 服 务 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


JIHTML mm =Q—. CC"— 〇 ”——.〈.,.,Q^.. . . 


欢迎 进入 通过 Socket 创 建 的 聊天 系统 


用 户 列表 


图 11.20 用 户 B 进 入 聊天 室 


在 Chrome 浏 览 器 中 切换 标签 到 用 户 A 的 聊天 室 ， 此 时 用 户 A 的 聊天 室 可 以 看 到 用 户 B 加 入 
到 聊天 系统 中 ， 如 图 11.21 所 示 。 


欢迎 进入 通过 Socket 创 建 的 聊天 系统 
通过 Sorket 创 建 聊 天 室 


图 11.21 用 户 B 加 入 后 用 户 A 的 聊天 界面 


在 Chrome 浏 览 器 ， 再 新 开 一 个 标签 页 面 ， 重 复 以 上 步骤 ， 让 用 户 C 也 加 入 到 聊天 系统 
中 ， 用 户 C 的 聊天 室 如 图 11.22 所 示 。 


欢迎 进入 通过 Socket 创 建 的 聊天 系统 


图 11.22 用 户 C 的 聊天 室 
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此 时 聊天 系统 


Ph 可 以 看 到 有 三 个 用 户 ， 分 别 是 用 户 A、 用 户 B 和 用 户 C。 当 一 个 用 


户 加 


入 到 聊天 系统 中 ， 系 统 向 所 有 的 用 户 广播 一 条 消息 ， 通 知 所 有 用 户 “ 某 某 ” 加 入 到 了 聊天 室 


个 人 发 起 聊天 。 


里 ， 并 更 新 在 线 聊 天 人 数 和 在 线 上 


户 列表 。 每 一 个 用 户 可 以 向 所 有 人 发 起 聊天 ， 或 者 对 


| 某 一 


在 用 户 A 的 聊天 室 里 ， 向 所 有 人 发 起 消息 “大 家 好 ， 我 是 A”， 操 作 步 骤 如 下 : 切换 到 用 
户 A 的 聊天 室 ， 在 聊天 文本 框 中 输入 “大 家 好 ， 我 是 A”， 然 后 按 Enter 键 ， 如 图 11.23 所 示 。 


在 用 户 A、 用 户 B、 


11.26 所 示 。 


欢迎 ,当前 时 间 是 Sun Jul 21 2013 21:13:35 GMT*+0800 (CST) 


欢迎 进 室 ,目前 有 3 人 在 秆 天 

广播 : 【A]】^-^ 加 入 了 对 天 室 [21:13:35] 
广播 :【B] ^-^ 加 入 了 对 天 室 [21:17:33] 
广播 :【C]】^-^ 加 入 了 对 天 室 [21:26:3] 


3 给 LNWA :] 


大 家 好 ， 我 是 用 户 A 


图 11.23 用 户 A 向 所 有 人 发 消息 


户 C 的 聊天 室 里 都 可 以 看 到 


A 
B 
C 


通过 Socket 创 建 聊天 室 
欢迎 A， 当 前 时 间 是 Sun Jul 21 2013 2L1335 GMT+0800 (CST) 


欢迎 进入 忆 天 室 ， 目 前 有 3 人 在 屏 天 
广播 : 【A] ^…^ 加 入 了 那天 室 
广播 :【B】^-^ 加 入 了 聊天 室 


广播 :【C] CN 
A: 大 家 好 ,我 是 用 户 A 


图 11.24 用 户 A 收 到 用 户 A 发 的 消息 


通过 Socket 创 建 聊 天 室 
欢迎 日, 当前 时 间 是 Sun iu 21 2013 211733 GMT+0800 (Csn 


[21:13:35] 
[21:17:33] 
[21:26:3] 
[21:39:3] 


欢迎 进入 那天 室 , 目前 有 3 人 在 于 天 
广播 :【B】^-^ 加 入 了 聊天 室 
广播 :【C】^-^ 加 入 了 聊天 室 


ER 


图 11.25 用 户 B 收 到 用 户 A 发 的 消息 


[21:17:33] 
[21:26:3] 
[21:39:3] 


户 A 发 的 这 条 消息 ， 如 图 11.24~ 图 
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图 11.26 用 户 C 收 到 用 户 A 发 的 消息 


户 B 和 用 户 C 看 到 用 户 A 的 消息 后 ， 用 户 B 向 用 户 C 询 问 用 户 A 是 谁 ， 操 作 过 程 如 下 : 切换 
到 用 户 B 的 聊天 室 ， 在 聊天 文本 框 中 输入 “C， 你 知道 A 是 谁 吗 ? ”， 如 图 11.27 所 示 。 


图 11.27 用 户 B 向 用 户 C 询 问 


此 时 用 户 A 无 法 收 到 用 户 B 的 消息 ， 用 户 C 收 到 了 用 户 B 的 消息 ， 用 户 B 和 用 户 C 的 界面 如 
图 11.28 和 图 11.29 所 示 。 


,当前 时 间 是 Sun jul 21 2013 21:17:33 GMT+0800 (C5T) 


[21:17;33] 
[21:26:3] 
[21:39:3] 

[21;46:54] 


[21:26:3] 
[21:39:3] 


[21:46:54] 


图 11.29 用 户 C 收 到 了 用 户 B 的 私信 


11.6.2 代码 设计 与 分 析 
利用 编辑 器 打开 “appjs” 文 件 ， 代 码 如 下 : 
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@、 |HTML 5 网 页 开发 实例 详 色 


44 server.listen (PORT); 


请 用 浏览 器 打开 ! ") ; 


46 websocketserver(server); 


app.js 文 件 是 服务 器 启动 的 入 


45 console.1og ("服务 器 运行 在 : http://127.0.0.1:" 


// 静态 服务 器 监听 在 用 户 定义 的 端口 


PORT tn 


// 运行 web wocket server 


文件 ， 主 要 包括 启动 静态 服务 器 和 启动 WebSocket 服 务 


器 。 


第 01 行 ~ 
来 启动 静态 服务 。config 模 块 包 含 了 一 些 基 本 配置 信息 ， 在 本 例 中 主要 需要 配置 端 


第 08 行 ， 加 载 本 系统 需要 的 模块 ，http、path、url、fs 是 系统 模块 ， 主 要 用 


websocketserver 模 块 ， 是 本 示例 的 核心 模块 ， 主 要 提供 WebSocket 的 请 求 处 理 服 务 。 
第 10 行 ， 解 析 URL 的 路 径 ， 并 对 URL 做 出 响应 。 


第 11 行 ， 调 


系统 path 模 块 ， 判 断 文件 是 否 存在 。 


第 13 行 ~ 第 16， 如 果 文 件 不 存在 则 抛 出 404 错 误 。 


第 21 行 ~ 第 22 行 


， 文 件 存在 ， 但 读 取 失败 ， 抛 出 500 错 误 。 


第 24 行 ~ 第 29 行 ， 提 取 文 件 后 级 ， 并 生成 对 应 的 mime。 其 映射 关系 是 根据 config.js 文 件 中 
的 mime 做 映射 。 代 码 如 下 : 

mess MieteyCyany // 样式 表 

molt inae/GgiE // gif 格式 图 片 

"html": "text/html", // html 页 面 

"ico": "image/x-icon", // icon 格式 图 标 

"jpeg": "image/jpeg", // jpeg 格 式 图 片 

"jpg": "image/jpeg", // jpg 格 式 图 片 

"js": "text/javascript", // Javascript 脚 本 

"json": "application/json", // json 格 式 文件 

"pdf": "application/pdf", // paf 格 式 文件 

"png": "image/png", // png 格式 图 片 

"svg": "image/svgtxml", // svg 格式 矢量 文件 

"swf": "application/x-shockwave-flash", // _ swf 格式 flash 文 件 

EEC nimade/tneEn // tiff 图 片 文件 

mtRt"e "text/pialn™y // txt 文 本 文档 

"wav": "audio/x-wav", // wav 音 频 文件 

"wma": "audio/x-ms-wma", // wma 音 频 文件 

"wmv": "video/x-ms-wmv", // wmv 视频 文件 

wiml a WEent/xn™ // xml 文 件 

第 36 行 ， 创 建 静态 服务 器 。 

第 38 行 ， 设 置 默 认 首页 为 page.html 页 面 。 

第 40 行 ， 启 动静 态 服务 器 。 

第 44 行 ， 调 用 WebSocketServer， 并 把 httpServer 的 实例 作为 参数 传递 给 WebSocketServer。 

利用 编辑 器 打开 websocketserverjs 文 件 ， 代 码 如 下 : 

01 var 

02 clients = []， // 存储 客户 端 连 接 

03 users = []， // 存储 连接 的 用 户 名 

04 WebSocketServer = Tequire ('websocket') .serVeI7 

// 引入 WebsocketServer 模 块 
05 var run = function(httpServer){ 
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06 
07 
08 
09 
10 
多 


12 


下 3 
14 
15 
16 
17 
18 
Ee, 
20 
21 


22 
23 


24 
25 


26 
27 


28 
PP 
30 
3 


32 


33 
34 


35 


36 


38 


39: 
40 
41 
42 
43 
44 
45 


加 入 了 聊天 室 ') ; 


wsServer = new WebSocketServer ({ // 创建 Websocketserver 实 例 


httpServer: httpServer, 
autoAcceptConnections: false 


wsServer.on('request', function(request) { 


Var connection = request.accept('chat-protocol', 


request .origin) ; // 获取 连接 


var client index = clients.push(connection) - 1; 
// 聊天 室 人 员 加 1 
users[client index] = 'Anonymous'; // 设置 用 户 名 为 
// Anonymous 
// 当前 用 户 接收 客户 端 发 来 的 消息 
var message = function (message) { // 接收 消息 回调 函数 
if (message.type === "utf8') { 
var data = JSON.parse (message.utf8Data); 
Var message = data['message']; // 消息 
Var sender = data['sender']; // 发 送 者 
if(sender == 'ws: join '){ // 有 新 用 户 加 入 聊天 室 
// 新 加 入 逻辑 
// 广播 
broadcasted( '【' + message + '】^-^ 
// 通知 所 有 人 有 人 加 入 
// 更 新 用 户 名 单 
users[client index] = message; 
// 更 新 当前 加 入 者 用 户 名 
updateUser (); // 更 新 用 户 列表 
}else if(sender == 'wWws:_ send '){ 
// 发 送 消息 逻辑 
Var from = message.from, // 获取 发 送 源 
to = message.to，// 获取 目的 地 源 
msg = message.msg; // 获取 消息 体 
if(to == "all'){ // 发 送 给 所 有 人 
// 发 送 对 象 是 所 有 用 户 
broadcasted (msg, from); 
// 广播 消息 
lelsef{ // 发 送 给 某 个 人 


for (var i = 0; i < clients. 


length; i++){ 


if(users[i] == 


to || users[i] == from){ // 发 送 给 自己 和 对 方 


var json data = 


JSON.stringify({'message': "私信 : ， + msg, 'sender': 37 from}); 


clientstil. 


sendUTF (json data); // 把 消息 push 到 客户 端 


} 
» 


1; 
// 当前 加 入 者 监听 退出 聊天 室 事件 
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第 28 行 ~ 第 30 行 ， 获 取 客 户 端 发 送 来 的 发 送 者 身份 、 发 送 的 消息 体 和 发 送 的 对 象 。 

第 29 行 ~ 第 40 行 ， 如 果 发 送 对 象 为 所 有 用 户 ， 则 把 当前 消息 广播 给 所 有 人 ， 否 则 ， 把 这 
条 消息 发 送 给 他 自己 和 发 送 对 象 ， 保 证 只 有 自己 和 发 送 的 对 象 才 能 看 到 这 条 消息 。 

第 45 行 ~ 第 51 行 ， 当 连接 关闭 时 ， 调 用 此 回调 函数 。 表 示 用 户 离开 了 聊天 室 ， 服 务 端 收 
到 此 消息 后 ， 把 当前 离开 的 客户 端 删除 ， 然 后 从 当前 的 用 户 列表 中 删除 离开 的 用 户 ， 最 后 通 
知 所 有 其 他 用 户 “ 某 某 用 户 已 经 离开 了 聊天 室 ”。 

第 52 行 ， 监 听 消 息 接收 事件 。 

第 53 行 ， 监 听 连 接 关 闭 事件 。 

第 57 行 ~ 第 60 行 ， 定 义 广播 消息 函数 ， 此 函数 向 所 有 用 户 发 送 消息 。clients 存 储 了 所 有 用 
户 的 连接 请 求 ， 利 用 连接 对 象 connection 的 sendUTF 方 法 ， 可 以 向 客户 端 发 送 消息 。 


查 _ 
| 里 未 更 多 详情 请 参考 https://github.com/Worlize/WebSocket-Node/wiki/Documentation。 


第 62 行 ， 向 所 有 客户 端 更 新 用 户 列表 。 
利用 编辑 器 打开 “www/page.html” 文 件 ， 代 码 如 下 : 


01 <!DOCTYPE html> 


02 <html> 

03 <head> 

04 <meta http-equiv="content-type" content= 
"text/html;charset=utf-8"> 

05 <title>node chat via Socket</title> 

06 <script src="jquery-1.8.3.js"></script> 

07 <link href="chat.css" rel="stylesheet" type="text/css" /> 

08 </head> 

09 <body> 

10 <hl class="1ogo"> 欢 迎 进 入 通过 Socket 创 建 的 聊天 系统 </h1> 

了 <div class="login" id="login wrap"> 

<!-- 登 录 窗口 --> 
I <h2> 请 先 输入 你 的 名 字 </h2> 
3 <input type="text" id="uname" class="txt"/> 
<!1-- 先 输入 用 户 名 --> 

14 </div> 

15 <div class="wrapper" id="wrapper"> <!-- 聊 天 窗口 --> 

16 <div class="header"> 

hy <hl id = "page_title"> 通 过 socket 创 建 聊天 室 </h1> 

18 </div> 

LS <div class="content"> 

20 <div class="chat wrap"> 

之 下 <p class="chat title"> 

欢迎 <span id="J_ uname" 
class="myname"></span>，<!-- 当前 登录 用 户 --> 

23 当前 时 间 是 <span iqd="J time" 
class="time"></span> <!-- 当前 登录 时 间 --> 

24 </p> 

25 <div class="chat body"> 

26 <ul class="chat msg" id="messages"> 
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CH samen ee 


<!-- 对 话 消息 列表 --> 


2 <1i> 欢 迎 进入 聊天 室 ， 目 前 有 
<span class="userTotal"></span> 人 在 聊天 </1i> 

28 </ul> 

29 <hr class="hr"> 

30 <div class="chat act"> 

3 <label for="sendto"> 发 送 给 
</label> 

2 <select name="sendto" 
id="sendto"> <!-- 发 送 对 象 用 户 列表 --> 

33 <option value="all"> 所 有 人 </option> 

34 </select> 

35 </div> 

36 <div class="chat input"> 

37 <!-- 聊 天 内 容 --> 

38 <textarea class= 
"chat input txt" id="chat input"></textarea> 

39 <div> 

40 </div> 

41 </div> 

42 </div> 

43 <div class="chat user"> 

44 <p class="chat_title"> 用 户 列表 </p> 

45 <div class="user body"> 

46 <ul id="Userlist"> <!-- 用 户 列表 --> 

47 </ul> 

48 </div> 

49 </div> 

50 </div> 

万 让 <script src="chat.js"></script> <!-- 引 入 chat .js 文件 --> 

2 </body> 

53 </html> 


第 11 行 ~ 第 14 行 ， 当 打开 首页 时 ， 显 示 一 个 登录 框 ， 需 要 用 户 输入 用 户 名 ， 如 图 11.18 所 


示 。 


第 15 行 ， 聊 天 窗口 的 外 层 div， 该 div 被 默认 隐藏 ， 当 用 户 输 入 了 用 户 名 后 ， 该 div 被 显示 

第 22 行 ~ 第 23 行 ， 用 户 登录 后 ， 分 别 显示 用 户 名 和 登录 时 间 。 

第 26 行 ~ 第 28 行 ， 对 话 列 表 ， 当 有 新 对 话 时 包括 用 户 间 的 对 话 和 广播 消息 ， 都 使 用 
appendChild 方 法 追加 在 ul 元 素 内 。 

第 32 行 ~ 第 34 行 ， 发 送 对 象 列表 。 当 用 户 列表 更 新 时 ， 该 列表 也 被 更 新 ， 但 该 用 户 列表 
不 包括 登录 用 户 自己 。 

第 38 行 ， 消 息 发 送 窗口 ， 按 Enter 键 表示 发 送 消息 。 

第 46 行 ~ 第 47 行 ， 用 户 列表 。 当 有 新 用 户 加 入 时 ， 该 列表 被 更 新 。 

利用 编辑 器 打开 “www/chatjs” 文 件 ， 代 码 如 下 : 


01 if(!IWebSocket){ // 判断 浏览 器 是 否 支 持 websocket 
02 alert('Your browser does not support WebSocket, you cannot 
chat ty? 
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}elsef 
var Socket; // 定义 socket 全 局 变量 ， 程 序 运行 时 被 赋值 
var username; // 定义 当前 用 户 名 全 局 变量 
$ (function(){ 
var 
login wrap = $("#login wrap"), // 登录 窗口 
uname input = $("#uname"), // 登录 用 户 名 
uname welcome = $("#J uname"), // 登录 后 显示 用 户 名 
now time = $("#J time"), // 登录 后 显示 当前 时 间 
userList = $("#Userlist"), // 用 户 列表 
userTotal = $(".userTotal"), // 用 户 总 数 
sendto = $("#sendto"), // 发 送 对 象 用 户 列表 
message list = $("#messages"), // 聊天 消息 列表 
chat input = $('#chat input'), // 发 送 消息 文本 
chat wrap = $("#wrapper"); // 聊天 窗口 
var now = function(){ // 获取 当前 时 间 
Var time = new Date(); 
return time.getHours() + ':' + time.getMinutes() 
+ ':' + time.getSeconds (); 
} 
var updateUserList = function(users){ // 更 新 用 户 列表 
Var user html = "vv 
send to html = '<option value="all"> 所 有 人 </option>'; 
if(users.length > 0){ 
users.forEach (function (user){ 
user html += '<li>' + user + '</li>'; 
if(user != username){ // 加 入 聊天 对 象 ， 不 包括 自己 
send to html += "<option value="'+ 
user +'">'+ user +'</option>' 
} 
HR 
userList.html (user html); // 更 新 用 户 列 表 
sendto.html (send to html); // 更 新 发 送 对 象 
UserTotal.html (users.length); // 更 新 用 户 总 数 
上 
var open = function (event){ // socket 连 接 成 功 回调 函数 
login wrap.remove(); // 隐藏 登录 窗口 
chat wrap.show(); // 显示 聊天 窗口 
uname welcome.text (username); // 设置 当前 用 户 名 
now time.text (new Date()); // 设置 当前 时 间 
var json data = JSON.stringify({'message':username, 
"sender's ws: join WW)s 
Socket.send (json_data); // 发 送 消息 socket 消 息 ， 在 服务 器 端 注 册 用 户 
] 
Var message = function (event)1{ // 接收 服务 器 端 发 回 的 消息 回调 函数 
var data = JSON.parse (event.data); // 将 消息 转化 为 JSON 格 式 
var sender = data['sender'] || ''; // 消息 的 发 送 者 
Var message = data['message'] || ''; // 消息 内 容 
if(sender 一 'ws: ”update user '){ // 发 来 的 消息 为 更 新 用 户 列表 动作 
updateUserList (message); // 调用 更 新 用 户 列表 函数 
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离线 Web 应 用 大 演练 


本 章 的 示例 包含 两 大 块 技术 内 容 : 一 块 是 Web Worker， 用 于 解决 
JavaScript 多 线程 的 方案 ; 另外 一 块 是 Cache Manifest， 是 一 种 HTML 5 的 
缓存 机 制 ， 可 在 没有 因特网 连接 的 情况 下 ， 照 样 使 用 Web 应 用 ， 同 时 当 
恢复 网 络 连接 时 ， 还 能 通过 JavaScript 自 动 对 数据 进行 同步 更 新 ， 这 在 
HTML 5 出 现 之 前 是 一 个 完全 无 法 想象 的 应 用 功能 。 另 外 ， 这 对 移动 设 
备 来 说 也 是 一 项 伟大 的 技术 功能 ， 在 国内 移动 网 络 速度 普遍 缓慢 的 情况 
下 ， 通 过 离线 存储 可 以 有 效 地 缓解 应 用 的 访问 速度 问题 。 通 过 以 下 示例 
的 学 习 ， 读 者 完全 可 以 开发 一 款 属于 自己 的 离线 应 用 ， 一 起 来 学 习 吧 。 

本 章 知识 点 : 


。 Web Worker 技 术 
。 离线 存储 技术 
。 制作 离线 留言 页 面 


12.1 示例 1 使 用 定时 器 


12.1.1 示例 效果 


本 示例 将 用 HTML 5 的 Web Worker 重 写 第 6 章 的 动画 计时 器 ， 读 者 可 以 通过 对 比 两 个 示 
例 更 加 直观 地 了 解 Web Worker 的 使 用 。 首 先 ， 将 页 面 文件 和 脚本 部 署 在 Web 服 务 器 上 ， 如 
Apache、IIS 或 者 Nginx 等 。 


使 用 Chrome 打 开本 示例 页 面 地址 ， 效 果 如 图 12.1 所 示 。 


| 


到 12.1 使 用 Chrome 打 开本 示例 页 面 地 址 


[hu 
起 


“开始 ”按钮 开始 计时 ， 效 果 如 图 12.2 所 示 。 


[= 
过 
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3 interval = null; 

34 else if (type == "reset") | // 复位 操作 

35 time stop = 0; // 清 零 时 差 

36 ClearInterval (interval); 

3 interval = null; 

38 postMessage ({ date: 0 }); // 向 页 面 传 回 初始 数据 

= 六 

40 } 

代码 第 01 行 ~ 第 19 行 分 析 可 以 参考 第 6 章 的 “制作 动画 计时 器 ”或 者 代码 后 方 的 注释 。 

代码 第 20 行 中 的 onmessage 是 self.onmessage 或 this.onmessage 的 缩写 ，selffhthis 指 的 都 是 
Worker 线 程 的 全 局 作用 域 ， 该 方法 用 以 监听 主线 程 传 入 的 消息 。 


在 主线 程 中 ， 操 作 按 钮 每 次 单 击 时 将 对 应 的 操作 类 型 字符 串 存 入 对 象 中 ， 并 传递 给 
Worker 线 程 ， 代 码 第 21 行 ~ 第 22 行 中 Worker 线 程 接收 到 主线 程 返回 的 数据 ， 取 得 数据 中 的 操作 
类 型 ， 通 过 操作 类 型 执行 对 应 的 业务 操作 逻辑 。 

代码 第 27 行 和 第 38 行 中 的 postMessage 方 法 是 selfpostMessage 或 this.postMessage 的 缩写 ， 
该 方法 用 于 给 主线 程 返回 信息 ， 可 以 接收 字符 串 或 JSON 对 象 作为 单个 参数 。 


把。 ”本 例 的 演示 只 不 过 是 HTML 5 Web Worker 的 冰山 一 角 ，Web Worker 应 用 在 目前 还 是 新 概 
ew 念 ， 更 多 的 信息 可 以 参考 网 站 http://www.whatwg.org/specs/web-apps/current-work/multipage/ 
workers.html 。 
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12.2 示例 2 排队 处 理 订单 


12.2.1 示例 效果 


本 例 展示 一 种 常用 的 订单 处 理 页 面 ， 不 同 之 处 在 于 订单 会 被 发 送 至 Web Worker 线 程 进 
行 处 理 ， 待 处 理 完毕 以 后 返回 主线 程 。 首 先 ， 将 页 面 文件 和 脚本 部 署 在 Web 服 务 器 上 ， 如 
Apache、IIS 或 者 Nginx 等 。 

使 用 Chrome 打 开本 示例 页 面 地 址 ， 效 果 如 图 12.3 所 示 。 
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本? 
to02 3 
十 让 
Fig 
Ei 


-Bmob 


图 12.3 使 用 Chrome 打 开本 示例 页 面 地 址 
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@、 |HTML 5 网 页 开发 实例 详解 mm 


选中 首 条 订单 号 1001， 单 击 “ 处 理 ” 按 钮 ， 订 单数 据 被 发 送 到 Worker 线 程 处 理 ， 处 理 完 
毕 后 返回 “处 理 完毕 ”状态 ， 效 果 如 图 12.4 所 示 。 


[5E.: | 

局 订单 号 商品 名 

外 理 寺 第 1001 两 个 
ID 1002 两 鞋 
Cc 1003 雨衣 
Lu 1004 雨 哈 
口 1005 十 洲 

所 有 订单 处 理 完毕 
图 12.4 处 理 订单 1001 号 


hh 


选中 剩余 所 有 订单 ， 单 击 “ 处 理 ” 按 钮 ， 订 单 将 由 上 至 下 的 顺序 逐一 被 处 理 。 


12.2.2 代码 设计 和 分 析 
示例 程序 由 主页 面 和 Worker 肢 本 两 部 分 组 成 ， 主 页 面 代码 如 下 : 


01 <!DOCTYPE HTML><html> 


02 <head> 
03 <link rel="stylesheet" type="text/css" href="../css/grid.css" /> 
<!-- 列表 样式 --> 
04 <script src="../js/jquery-1.8.3.js"></script> 
05 </head> 
06 <body> 
07 <header><h2> 排 队 处 理 订单 </h2></header> 
08 <section> 
09 <div class="grid"> 
10 <div class="window_ search"> 
LE <div class="window tools"> 
ed <div class="tDiv2"> <!-- 操作 按钮 区 --> 
3 <div class="fbutton"><div><span class="start"> 
处 理 </span></div></div> 
14 <div class="btnseparator"></div> 
15 </div> 
16 </div> 
上 </div> 
18 <div class="window grid"> <!-- 订单 区 --> 
19 <table class="data tablesorter"> 
20 <thead> 
2 <tr class="tablesorter-header"> 
22 <th class="tablesorter-header"> <!-- 标题 区 --> 
六 3 <div class="tablesorter-header-inner"> 
<input type="checkbox" id="J all"” title=" 全 选 "/></div> 
24 </th> 
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己 
rs 


pe 


48 
49 


61 
62 
63 


<th class="tablesorter-header"><div class="tablesorter- 
header-inner"> 订 单 号 </div></th> 
<th class="tablesorter-header"><div class="tablesorter- 
header-inner"> 商 品名 </div></th> 
</tr> 
</thead> 
<tbody> 
<tr class="zebra"> <!-- 商品 列表 信息 区 --> 
<td><input type="checkbox" data-id="1001" /> 
</td><td>1001</td><td> 雨 伞 </td> 


</tr><!-- .. .省 略 剩余 商品 结构 ， 详 见 本 书 网 络 资源 --> 
</tbody> 
</table> <!-- 提示 区 --> 
</div><div class="window page"><span class="btn J tip"> 
</span></div> 
</div> 
</section> 
</body> 
<script> 
var check all = $('#J all'), // 全 选 按钮 
check items = $('input[data-id]'), // 订单 选项 
tip = $('span.J tip'); // 提示 框 
check all.on('click', function (e) { // 监听 全 选 按钮 单 击 事件 
Check items.attr('checked', this.checked); 
// 订单 选项 与 全 选 按钮 同步 
DD); 
check items.on('click', function (e) { // 订单 选项 单 击 事件 监听 
check all.attr('checked', !!$('input[data-id]:checked'). 


length); 


nD); 
$('span.start') .on('click', function (e) { // “处 理 ” 按 钮 单 击 监听 
var ids = []; 
$('input[data-id] :checked') .each (function (index, item) { 
// 获取 选中 的 订单 号 
ids.push($ (item) .attr('data-id')); 
nD; 
ids.length && work.postMessage({ ids: ids }); 
// 将 订单 号 传 给 Web Worker 处 理 
ys 
Var work = new Worker('002.Worker.js'); // 创建 一 个 Web Worker 
work.onmessage = function (e) { // 监听 web Worker 消 息 事 件 
var data = e.data; 
tip.html (data.msg); // 获取 返回 的 提示 信息 显示 在 提示 区 
$('input[data-id="' + data.id + '"]').closest('td') .html 
(' 处 理 完毕 ') ; 
check all.attr('checked', false); // 取消 全 选 按 钮 选中 状态 
4 
</script></html> 


ff 列表 中 ， 每 条 订单 的 复 选 框 都 带 有 “data-id” 自 定义 属性 ， 表 示 该 条 订单 的 订单 


订 生 


见 代码 第 31 行 。 
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12.3 示例 3 在 后 台 运行 JavaScript 


12.3.1 示例 效果 


本 例 将 使 用 Web Worker 在 后 全 运行 一 段 JavaScript， 实 现 自动 更 新 列表 功能 。 本 例 后 台数 
据 存储 将 采用 一 个 静态 文本 模拟 ， 读 者 可 以 自行 更 改 文本 数据 实现 动态 更 新 。 首 先 ， 将 页 面 
文件 和 脚本 部 署 在 Web 服 务 器 上 ， 如 Apache、IIS 或 者 Nginx 等 。 

使 用 Chrome 打 开本 示例 页 面 地 址 ， 效 果 如 图 12.5 所 示 。 


3 
4 王 
4 学 
小 周 


旭 泗 省 | 计 


图 12.5 使 用 Chrome 打 开本 示例 页 面 地 址 


打开 文件 “datajson”， 修 改 “ 小 王 ” 为 “小 张 ”， 此 时 页 面 列表 发 生变 化 ， 效 果 如 
12.6 所 示 。 


国 


让 名 性 别 年 苍 
Ei 女 31 
4 池 男 28 
小 周 男 29 


图 12.6 修改 “小 王 ” 为 “小 张 ” 


再 次 打开 文件 “datajson”， 新 增 一 条 JSON 数 据 ， 新 增 数据 格式 如 下 : 


name 小 刘 " 
age": 39， 
sex": " 女 " 


此 时 列表 末尾 出 现 新 增 信息 ， 效 果 如 图 12.7 所 示 。 


JIHTML na >.=—., oCQC"°——"..  ，、 »,.,.,，.=, 


六 如 泗 站 同 


图 12.7 新 增 一 条 信息 


12.3.2 代码 设计 和 分 析 
首先 从 展示 页 面 开始 分 析 ， 代 码 如 下 : 


01 <!DOCTYPE HTML><html> 


02 

03 "stylesheet" type="text/css" href="../css/grid.css" /> 
<!-- 列表 样式 --> 

04 <script src="../js/jquery-1.8.3.js"></script> 

05 </head> 

06 <body> 

07 <header><h2> 排 队 处 理 订单 </h2></header> 

08 <section> 

09 <div class="grid"> 

10 <div class="window grid"> 

EE <table class="data tablesorter"> 

2 <thead> 

13 <tr class="tablesorter-header"> 

14 <th class="tablesorter-header"> 
<!-- 标题 结构 --> 

15 <div class="tablesorter-header-inner"> 
姓名 </div> 

16 </th> 

hh <th class="tablesorter-header"> 

18 <div class="tablesorter-header-inner"> 
性 别 </div> 

19 </th> 

20 <th class="tablesorter-header"> 

2 <div class="tablesorter-header-inner"> 
年 龄 </div> 

22 </th> 

23 Ee 

24 </thead><tbody></tbody> <!-- 数据 列表 区 --> 

2 </table> 

26 </div> 

2 </div> 

28 </section> 

29 <script id="J item" type="text/x-html5-tmpl"> <!-- 元 素 HTML 模 板 --> 

30 <tr class="zebra"><td>{name}</td><td>{sex}</td><td>{age}</td></tr> 
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© 
姓名 性 别 年 龄 振作 
小 李 女 28 肌 除 修改 
小 王 男 30 出 除 们 改 
小 周 男 28 删除 修改 
小 苹 妇 28 出 除 修 履 


图 12.9 添加 多 条 用 户 信息 


单 击 第 2 条 数据 “小 王 ” 操 作 区 的 修改 按钮 ， 出 现 带 有 “小 王 ” 录 入 信息 的 浮 层 ， 效 果 
如 图 12.10 所 示 。 


姓名 : 由 王 
性 别 : 阳 -| 


图 12.10 单 击 数据 “小 王 ” 操 作 区 修改 按钮 


修改 “小 王 ” 的 年 龄 为 40， 并 单 击 “ 确 认 ” 按 钮 保存 修改 信息 ， 此 时 列表 对 应 内 容 同步 
更 新 ， 效 果 如 图 12.11 所 示 。 


© 
姓名 性 别 年 龄 氢 作 
4 可 女 28 出 除 修改 
小 王 男 so 且 除 位 疏 
小 周 男 28 这 位 改 
小 苹 女 28 届 除 修改 


图 12.11 修改 指定 行 信息 


12.4.2 代码 设计 和 分 析 


本 示例 功能 的 添加 和 删除 功能 已 经 在 第 10 章 的 示例 “使 用 本 地 数据 库 ” 进 行 了 详细 的 介 
绍 ， 本 节 将 把 介绍 的 重点 放 在 新 增 的 修改 功能 上 。 
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列表 元 素 模 板 区 增加 了 一 条 修改 按钮 的 HTML 字 符 模板 ， 元 素 的 样式 类 名 为 modify， 同 
时 元 素 还 带 有 一 个 自 定义 属性 “data-id” 用 以 表示 该 条 记录 的 主键 标识 ， 模 板 代 码 如 下 : 


<tr class="zebra"> 


<td>{name}</td><td>{sex}</td><td>{age}</td> 


// 姓名 、 性 别 、 年 龄 信息 
<td> 
<a href="#" class="del"” data-id="{id}"> 删 除 </a> // 删除 
<a href="#" class="modify"” data-id="{id}"> 修 改 </a> // 修改 按钮 
</td> 


</tr> 


独立 出 方法 open_dialog， 为 用 户 弹 出 信息 录入 框 ， 代 码 如 下 : 


function open dialog(title, callback) { 


Var wraper = $($('#J form').html()); // 新 建 添加 弹 层 
$ (document .body) .append (wraper); // 注意 页 面 结构 
wraper.dialog({ 
position: 'center', title: title, modal: true, 
buttons: [{ text: "确认 "， 
click: function () { 
var name = wraper.find('input.name') .val(), // 姓名 值 
sex = wraper.find('select.sex') .val (), // 性 别 值 
age = wraper.find('input.age') .val (); // 年 龄 值 
if (name.length && sex.length && age.length) { // 输入 验证 


callback ({ name: name, sex: 
// 执行 回调 函数 ， 传 入 录入 信息 
$ (this) .dialog ("close"); 


} else { alert(' 请 正确 填写 所 有 填写 内 容 '); }; 
} 


}，{ text: "取消 "， 
click: function () { $(this).dialog("close"); } // 关闭 按钮 事件 


sex, age: age }); 


// 关闭 弹出 


}] 
1D); 
wraper.dialog('open'); 


// 打开 弹出 框 
return wraper; 
}; 


open_dialog 函 数 接收 两 个 参数 ， 说 明 如 下 。 


。 title: 弹出 框 的 标题 ， 字 符 型 。 
。 callback: 单 击 “确认 ”按钮 后 的 回调 函数 ， 接 收 一 个 数据 对 象 。 


新 增 的 另外 一 个 函数 modify_item， 用 以 完成 弹出 修改 框 ， 将 确认 的 内 容 同步 更 新 至 本 地 
离线 数据 库 ， 代 码 如 下 : 


function modify item(target) { 
Var id = target.attr('data-id'); // 该 条 记录 的 主键 标识 
function update _db (data) { // 更 新 本 例 离线 数据 库 


storageDriver.transaction(function (t) { 


t.executeSql ("update " + DB NAME + " set name=?, sex=?, 
age=? where id=?", 
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[data.name, data.sex, data.age, id], 
// 传 入 修改 数据 
function (transaction resultSet) { 
target.closest('tr') .replaceWith(substitute(item tpl, 
data) ) ;// 更 新 对 应 行 信息 
D7 D7 3 
storageDriver.transaction(function (t) { 
t.executeSql ("SELECT * FROM " + DB NAME + " where id=' + id, [], 
// 读 指 定 行 信息 
function (t, results) { 
var wraper = open dialog( ' 修 改 '，function (data) 1{ 


// 弹出 修改 框 
data.id = id; // 记录 信息 主键 值 
update db (data); // 存 入 本 地 离线 数据 库 


}F)r results? 

for (var i = 0, 1 = results.rows.length; i < 1; i++) { 
result = results.rows.item(i); 
wraper .find('input.name') .val (result.name); 


// 设置 姓名 

wraper .find('select.sex') .val (result.sex); 
// 设置 性 别 

wraper .find('input.age') .val (result .age); 
// 设置 年 龄 


modify_item 方 法 一 共 会 完成 两 条 SQL 语句 。 首 先 ， 从 本 地 离线 数据 库 中 读 取 指 定 行 信 
息 并 填充 至 弹出 框 的 对 应 输入 框 内 。 单 击 修改 框 中 的 “确认 ”按钮 ， 会 触发 该 方法 的 内 部 函 
数 update_ db， 该 函数 接收 一 个 存放 用 户 信息 的 数据 对 象 参数 ， 修 改 数据 库 执 行 Update 语 句 ， 
SQL 语 法 如 下 : 

UPDATE 表 名 称 SET 列 名 称 = 新 值 WHERE 列 名 称 = 某 值 
最 后 ， 不 要 忘记 在 列表 的 监听 代理 上 添加 对 修改 按钮 单 击 事件 的 捕捉 ， 代 码 如 下 : 


tbody.on('click', function (e) { // 监听 列表 单 击 事件 

Var target = $(e.target); 

if (target.hasClass('del')) { // 目标 元 素 为 删除 按钮 
e.preventDefault () 7 // 阻止 a 元 素 默 认 事件 
del item(target); // 删除 元 素 和 数据 库 内容 

} else if (target-hasClass('modify')) { // 目标 元 素 为 修改 按钮 
e.preventDefault (); 
modify item(target); // 弹出 修改 浮 层 


}; 
1D); 
通过 目标 元 素 的 样式 类 名 判断 元 素 的 操作 类 型 ， 当 目标 元 素 含 有 modify 的 样式 类 名 时 ， 
即 表示 为 操作 按钮 触发 ， 此 时 调用 modify_item 方 法 弹出 修改 浮 层 ， 执 行 修改 相关 操作 。 
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@、 |HTML 5 网 页 下 发 实 由 洋人 


12.5 示例 5 检测 网 络 的 当前 状态 


12.5.1 示例 效果 


传统 的 Web 应 上 
将 失去 


在 遇 到 没有 网 络 的 状况 下 基本 无 法 使 
网 络 这 个 纽带 。HTML 5 带 来 了 一 个 似乎 完美 的 解决 方案 。 本 示例 将 在 第 9 章 的 示例 


， 用 户 的 客户 端 与 远 端 的 服务 器 


“对 照片 进行 排序 ”的 基础 上 增加 离线 存储 和 联网 同步 的 功能 ， 实 现 不 丢失 任何 信息 的 一 次 


排序 操作 。 


首先 ， 进 入 本 示例 的 后 端 Server 文 件 夹 “file-server”， 


json” 


在 Windows 下 打开 


node server.js 


存放 商品 列表 数组 的 字符 序列 化 数据 ， 
serverjs” 存 放 了 主要 的 存储 和 读 取 罗 辑 脚本 ， 如 图 


pp 


12.12 所 示 。 
rr 
JS08 文件 


son 
server js 


JSeript Seript 文件 


图 


令 行 进入 刚才 的 目录 ， 执 行 代码 如 下 : 


如 果 启 动 成 功 ， 命 令 行 提示 如 下 : 


listening on http://localhost:8080 


使 


里 面 存放 了 三 个 文件 ， 


12.12 后 端 Server 文 件 夹 “file-server” 


» 


http://localhost:8080) ， 获 取 商 品 列表 信息 并 泻 染 至 网 页 上 ， 效 果 如 图 12.13 所 示 。 


12.13 使 用 Chrome 打 开 文 件 


“data. 


“package.json” 存 放 了 模块 的 描述 信息 ， 


Chrome 浏 览 器 打开 文件 ， 页 面 加 载 完毕 后 向 后 端 服务 器 发 送 一 个 Ajax 请 求 〈 地 址 为 
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此 时 ， 计 算 机 处 于 联网 状态 ， 拖 动 图 片 “ 护 目镜 ”至 第 一 位 ， 拖 动 完毕 时 页 面 发 送 商品 
最 新 排序 数据 至 后 端 服务 器 ， 发 送 数据 如 图 12.14 所 示 。 


© 【Headers| Preview Response Timing 


Request URL: http://localhost:8080/ 
Request Method: POST 
Status Code: @200 Ok 


YRequest Headers 


Accept: */*» 

Accept-Encoding: gzip, deflate, sdch 
Accept-Language: zh-CN, zh;q=0.8 

Connection: keep-alive 

Content-Length: 233 

Content-Type: application/x-www-form-urlencoded 


Host localhost: 5080 


Origin: null 
User-Agent: Hoz: 
vormDatla 
type: set 
data: [" 护 目镜 ", " 男 春 装 " 
TResponse Headers 
Access-Control-Allow- 


Access-Control- Allow-Origin: * 
Connection: keep-alive 

Date: Sat, 25 May 2013 10:41:24 GHT 
Transfer-Encoding: chunked 


图 12.14 存储 拖 息 后 商品 列表 信息 请 求 数据 


断 开本 地 网 络 使 计算 机 处 于 离线 状态 ， 拖 披 图 片 “太阳镜 ”至 第 一 位 ， 程 序 会 将 商品 列 


表 信息 存储 了 


FLocalStorage 中 ， 当 计算 机 再 次 联网 时 ， 自 动 同步 至 远 端 服务 器 。LocalSorage 数 


据 如 图 12.15 所 示 。 


Elenents | Resources | Network Sources Timeline Profiles Audits Console 
TO Frames iow 
加 (005 %E0%A3%9096E6%8.。 5-data-key 【 太阳镜 男 套 装 "黑色 护 腕 … 护 能 篮球 竺 " 护 目 鲁 ] 
* Web SQL 
* | jindexedDB 
" 国 Local songe 
司 file:// 
"Session Sorage 
国 fiew/ 
Y 厦 cookie 
赚 Local Files 
»* 国 Application Cache 


图 12.15 计算 机 离线 状态 LocalSorage 存 储 信 息 


12.5.2 代码 设计 和 分 析 


拖 中 功能 的 实现 已 经 在 第 9 章 的 “对 照片 进行 排序 ”示例 进行 了 详细 的 介绍 ， 本 节 将 对 
前 后 端 存 储 和 网 络 检测 部 分 进行 介绍 分 析 。 

首先 分 析 客户 端 网 页 代码 ， 其 中 一 个 非常 重要 的 方法 store_item_position， 用 于 存储 每 次 
拖 撤 后 商品 列表 的 数据 信息 ， 代 码 如 下 : 


01 function store item Position (data) { 


02 
03 
04 
05 


if (navigator.onLine) { // 是 否 联 网 在 线 


Var xmlhttp = new XMLHttpRequest (); // 新 建 XMLHttpRequest 实 例 
xmlhttp.onreadystatechange = function () { // 监听 请 求 状态 变化 


if (xmlhttp.readystate == 4) { // 判断 请 求 是 否 加 载 完毕 
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行 。 


06 if (xmlhttp.status == 200) { // 判断 请 求 是 否 成 功 
07 var data = JSON.parse (xmlhttp.responseText); 
// 将 获取 对 象 解析 为 JSON 
08 if (data.code == 200) { 
09 localSstorage.removeItem (STORAGE KEY); 
// 移 除 本 地 离线 存储 
10 }; 
Ln 1 
12 1; 
3 }; // 异步 请 求 远 端 数据 
14 xmlhttp.open("post", ‘'http://localhost:8080', true); 
5 xmlhttp.setRequestHeader ("Content-Type", "application/x-www-— 
form-urlencoded") 
16 Xmlhttp .send('type=set&data=' + encodeURIComponent (JSON. 
stringify(data))); 
7 } else { // 非 联网 在 线 
18 localStorage.setItem(STORAGE KEY, JSON.stringify(data)); 
// 本 地 离线 存储 列表 数据 
19 }; 
20 1}; 


该 方法 第 02 行 ， 使 用 navigator 对 象 的 onLine 属 性 判断 当前 的 网 络 状态 。 当 计算 机 处 于 联 
网 状态 ， 将 商品 列表 数据 data〈 见 代码 第 16 行 ) 发 送 至 后 端 服务 器 进行 存储 。 如 果 存 储 成 
功 ， 调 用 LocalStorage 的 removeItem 方 法 清空 用 于 本 地 存储 的 绥 存 键 指 ， 见 该 方法 第 09 行 。 

当 navigator 对 象 的 onLine 属 性 为 false， 此 时 计算 机 处 理 离线 状态 ， 数 据 无 法 保存 至 远 端 
的 存储 服务 器 ， 所 以 采取 将 商品 列表 数据 存储 至 本 地 浏览 器 的 LocalStorage 中 ， 见 代码 第 18 


函数 build list 用 了 


构建 商品 列表 的 HTML 结构 ， 同 时 绑 定 拖 披 相关 事件 ， 代 码 如 下 ， 


function build list(data) { 


Var htmls 


data.forEach (function (item) { 
htmls. 
i 


1D); 


= []; // 存储 列表 结构 数组 

// 循环 构建 商品 列表 HTML 结 构 
push('<div draggable="true"><img src="../images/shop/' 

png" draggable="false"/>' + item + '</div>'); 


document .querySelector('section') .innerHTML = htmls.join(''); 
// 填充 商品 列表 容器 
bind event(slice.call (document .getElementsByTagName ('div'), 0)); 


// 比 定 拖 忠 相关 事件 


除了 上 面 介绍 的 两 个 函数 ， 每 当 用 户 进 入 页 面 时 会 执行 泻 染 商品 列表 相关 的 逻辑 ， 代 码 


01 var STORAGE KEY = '5-data-key', // 本 地 缓存 键 值 

02 storage data = localstorage.getItem(STORAGE KEY); // 本 地 缓存 数据 
03 if (storage data) { // 存在 离线 内 容 

04 storage data = JSON.parse (storage data); // 解析 为 JSON 对 象 
05 build list(storage data); // 生成 列表 信息 

06 store item position(storage data); // 存储 后 端 离线 信息 
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08 
09 
10 


1 
12 
13 


14 
15 
16 


Ly 
18 
19 
20 
之 下 
22 


23 
24 


25 


26 
2 
28 
2 
30 


3E 


res.setHeader ('Access-Control-Allow-Methods', 'GET, POST') 7 
req.setEncoding ('utf8'); // 设置 接收 数据 编码 格式 为 UTF-8 
req.addListener('data', function (chunk) { 
// 接收 数据 块 并 将 其 赋值 给 postData 
postData += chunk; 
}) .addListener('end', function () { 
postData = querystring.parse (postData); 
// 解析 为 URL 参 数 对 象 
var result; 
if (postData.type == 'set') { // 存储 商品 列表 信息 
fs.writeFile( dirname + '\\data.json', 
JSON.stringify(postData.data || []), function (err) { 
if (err) { result = { "code": 500 }; 
} else { result = { "code": 200 }; }; 
res.end(JSON.stringify (result)); // 返回 存储 状态 
Ds; 
} else { // 获取 商品 列表 信息 
fs.readFile( dirname + '\\data.json', 'utf8', 


function (err, data) { 
1€ (erre) { esult =: { "code"”: 500 }3» 
} else { result = { "code": 200, "data": 
JSON.parse(data) }; }; 
res.end(JSON.stringify(result)); 
// 返回 商品 数组 序列 化 字符 串 
ys 
}; 
Ry 
1) .listen(8080, function () { // 设置 Web 服务 器 监听 端口 ， 并 启动 服务 
console.log('listening on http://localhost:8080'); 
// 控制 台 显 示 Web 服 务 器 启动 成 功 
DD); 


服务 器 端 主要 包含 读 取 数据 和 存储 数据 两 块 功能 。 当 从 URL 参 数 中 获取 参数 type 类 型 为 set 
时 ， 表 示 执 行 存 储 操作 ， 见 代码 第 15 行 ~ 第 20 行 ， 调 用 久 模 块 的 writeFie 方 法 ， 该 方法 语法 如 下 : 


fs 


.writeFile (filename, data, [options], callback) 


filename: 文件 完整 路 径 。 

data: 存储 数据 ，string 或 者 buffer。 
options: 可 选 参数 对 象 ， 可 忽略 。 
callback: 回调 函数 。 


当 参 数 type 为 其 他 时 ， 表 示 获 取 商 品 列表 数据 ， 见 代码 第 22 行 ~ 第 26 行 ， 调 用 fs 模块 的 
readFile 方 法 ， 该 方法 语法 如 下 : 


fs 


.readFile (filename, [options], callback) 


filename: 文件 完整 路 径 。 
options: 可 选 参数 对 象 ， 可 忽略 。 
callback: 回调 函数 。 
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商品 列表 存储 文件 〈 即 datajson) 数据 格式 如 下 : 
"[\" 护 目镜 \",\" 男 套装 \",\" 黑 色 护 腕 \",\" 护 腿 \",\" 复 球鞋 \",\" 太 阳 镜 \"]" 


12.6 示例 6 开发 离线 留言 网 页 


上 上 


12.6.1 示例 效果 
的 留言 网 页 ， 进 一 步 


本 例 将 结合 之 前 所 用 的 离线 应 用 知识 ， 实 现 一 个 可 在 离线 环境 使 


展现 Web SQL 在 日 常 开发 中 的 使 用 。 
使 用 Chrome 浏 览 器 打开 网 页 文件 ， 运 行 效果 如 图 12.16 所 示 。 


EEN 
图 12.16 使 用 Chrome 打 开 网 页 文件 


在 没有 输入 任何 内 容 时 ， 单 击 “ 留 言 ”按钮 ， 输 入 框 下 方 会 4 
写 留言 内 容 ”， 效 果 如 图 12.17 所 示 。 


bt 现 红色 的 提示 信息 “请 


| 请 二 留言 册 容 | 
图 12.17 不 输入 内 容 直 接 单 击 “ 留 言 ”按钮 
在 输入 框 中 输入 内 容 “ 开 发 一 个 离线 留言 网 页 ”， 单 击 “ 留 言 ”按钮 ， 提 交 成 功 后 下 方 
会 出 现 刚才 输入 的 留言 信息 ， 并 附 上 随机 生成 的 头像 和 用 户 名 ， 效 果 如 图 12.18 所 示 。 


图 12.18 输入 信息 并 单 击 “ 留 言 ”按钮 


E 复 多 次 刚才 的 留言 操作 ， 效 果 如 图 12.19 所 示 。 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 
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show_error tip 函 数 用 于 实现 错误 提示 功能 ， 并 在 提示 出 现 后 的 1500ms 自 动 隐藏 提示 信息 。 
留言 按钮 的 单 击 事件 监听 由 代码 第 72 行 ~ 第 82 行 完成 ， 单 击 按钮 后 ， 首 先 会 判断 在 输入 框 中 是 
否 输 入 了 留言 信息 ， 输 入 内 容 会 被 tim 方 法 去 除 头 尾 的 空格 符 ， 确 保 输入 内 容 真实 有 效 。 

每 次 刷新 页 面 ， 脚 本 都 会 自动 从 Web SQL 中 读 取 历 史 留 言 信息 并 进行 泻 染 ， 同 时 对 于 第 1 
次 进入 页 面 的 用 户 ， 会 在 该 用 户 的 浏览 器 中 自动 创建 一 张 用 于 存放 留言 信息 的 数据 表 ， 见 代 
码 第 84 行 ~ 第 97 行 。 


抱 本 例 中 使 用 的 Web SQL 还 只 是 HTML 5 中 的 冰山 一 角 ， 浏 览 器 客户 端 数据 库 还 有 更 多 的 功能 


医 玉 等 待 读者 去 发 现 ， 详 情 可 参考 网 站 http://www.w3.org/TR/webdatabase/。 


12.7 示例 7 添加 Geolocation 跟 踪 


12.7.1 示例 效果 


时 常 在 手机 的 APP 应 用 中 能 够 看 到 用 户 发 送 留 言 都 会 跟着 当前 的 地 理 位 置信 息 ， 现 在 由 
于 HTML 5 的 到 来 ， 在 网 页 上 实现 这 一 功能 也 是 轻而易举 的 事情 。 本 例 将 结合 上 一 示例 “ 开 
发 一 个 离线 留言 网 页 ”， 增 加 动态 获取 用 户 地 理 信 息 的 功能 。 首 先 ， 将 页 面 文件 和 脚本 部 署 
在 Web 服 务 器 上 ， 如 Apache、IIS 或 者 Nginx 等 。 

使 用 Chrome 浏 览 器 打开 本 示例 页 面 地 址 ， 效 果 如 图 12.20 所 示 。 


图 12.20 使 用 Chrome 浏 览 器 打开 本 示例 页 面 地 址 


然后 ， 进 入 本 示例 后 端 服务 器 文件 夹 “geolocation-server”， 一 共存 放 了 两 个 文件 ， 
“package.json” 存 放 了 模块 的 描述 信息 ，“serverjs” 存 放 了 主要 的 存储 和 读 取 逻辑 脚本 ， 如 
图 12.21 所 示 。 


JSON 文件 
JSeript Seript 文件 


图 12.21 后 端 服务 器 “geolocation-server” 文 件 夹 


在 Windows 下 打开 命令 行进 入 刚才 的 目录 ， 执 行 代码 如 下 : 


node server.i1s 
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如 果 启动 成 功 ， 命 令 行 提示 如 下 : 
listening on http://localhost:8080 


在 输入 框 中 输入 内 容 “ 添 加 Geolocation 跟 踪 ”， 单 击 “留言 ”按钮 ， 提 交 成 功 后 下 方 会 
出 现 刚 才 输 入 的 留言 信息 ， 并 附 上 随机 生成 的 头像 和 用 户 名 ， 同 时 还 带 有 当前 的 地 理 位 置信 
息 ， 效 果 如 图 12.22 所 示 。 


图 12.22 输入 信息 并 单 击 “ 留 言 ” 按钮 
重复 多 次 刚才 的 留言 操作 ， 效 果 如 图 12.23 所 示 。 


图 12.23 多 次 重复 留言 操作 


12.7.2 代码 设计 和 分 析 


HTML 5 本 身 不 会 提供 完整 的 地 理 位 置信 息 ， 但 是 会 返回 关键 的 经 纬度 信息 ， 然 后 开发 
人 员 可 以 通过 谷歌 的 公共 地 理 服务 将 经 纬度 转换 成 对 应 的 地 理 位 置信 息 。 
首先 ， 要 对 数据 表 进行 修改 ， 增 加 地 理 位 置信 息 geolocation 字 段 ， 代 码 如 下 : 


t.executesql ("CREATE TABLE IE NOT EXISTS " + DB_NAME + // 创建 数据 表 
"(id INTEGER PRIMARY KEY AUTOINCREMENT, "+ // 自 增 字段 


"name TEXT NOT NULL, ™ + // 姓名 字段 
"date TEXT NOT NULL, ™ + // 时 间 字段 
"content TEXT NOT NULL, "+ // 内 容 字段 
"geolocation TEXT NOT NULL, " + // 地 理 信息 字段 
mimg INTEGER DEFAULT 1)"); // 照片 字段 

监听 留言 按钮 的 单 击 事件 ， 增 加 获取 用 户 经 纬度 和 转换 经 纬度 为 地 理 位 置信 息 的 功能 ， 


代码 如 下 : 


01 submit btn.addEventListener('click', function (e) { 
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2 
24 
25 


e.preventDefault (); 
Var content = textarea el.value.trim(); 
if (content.length) { 
navigator.geolocation.getCurrentPosition(function (position) { 
// 获取 经 纬度 信息 回调 
var xmlhttp = new XMLHttpRequest(); // 新 建 xXMLHttpRequest 实 例 
xmlhttp.onreadystatechange = function () { 
// 监听 请 求 状态 变化 
if (xmlhttp.readystate == 4) { // 判断 请 求 是 否 加 载 完毕 
if (xmlhttp.status == 200) { // 判断 请 求 是 否 成 功 
var data = JSON.parse (xmlhttp.responseText); 
// 将 获取 对 象 解析 为 JSON 
store datal(l{ 
img: (new Date().getTime()) % 5, 
// 随机 头像 
name: ! 陌 生 人 ' + (new Date().getTime()) &% 5, 
// 随机 昵称 
date: new Date () .toLocaleString()， 
content: content, 
// 返回 市 一 级 别 的 地 理 位 置信 息 


geolocation: data.results[data.results. 


length - 3].formatted address 


UD 
xmlhttp.open("post", 'http://localhost:8080', true); 
// 异步 请 求 远 端 数 据 


xmlhttp.setRequestHeader ("Content-Type", "application/ 


x-Wwww-form-urlencoded"); 


// 获取 经 纬度 ， 并 传递 给 Ajax 请 求 


xmlhttp.send('lat=' + position.coords.latitude + '&lon=' + 


position.coords.longitude); 


]) 7 
} else { show_error_tip(' 请 填写 留言 内 容 '); }; 


}, false) 


经 纬度 和 地 址 的 转换 接口 由 于 跨 域 的 关系 无 法 用 Ajax 直接 进行 调用 ， 这 里 采用 通过 后 端 
程序 进行 包装 提供 调用 接口 。navigator.geolocation 的 getCurrentPosition 方 法 接收 一 个 匿名 函 


数 ， 当 浏览 器 获得 经 纬度 信息 时 产生 
性 可 以 获取 经 纬度 信息 ， 见 代码 第 05 行 和 第 22 行 。 


调 ， 并 通过 函数 接收 数据 position，position 的 coords 属 


下 面 分 析 后 端 Nodejs 服 务 ， 该 服务 主要 完成 调用 远程 谷歌 地 理 服务 的 工作 ， 代 码 如 下 : 


01 var querystring = require('querystring'), // 浏览 器 参数 数据 获取 模块 
02 http = require("http") 7 // 引用 http 模 块 ， 用 于 web 服 务 器 
03 http .createServer (function (req, res) { // 创建 新 服务 器 
04 Var postData = 三 17 
05 res.setHeader ('Rccess-ContLol-A1L1ow-Origin'， 5*1)7 
// 所 有 域名 跨 域 访问 均 可 以 被 通过 
06 res.setHeader('Access-Control-Allow-Methods', '‘'GET, POST'); 
// 服务 器 支持 ' GET， POST ' 方 法 
07 req.setEncoding ('utf8°'); // 设置 接收 数据 编码 格式 为 UTF-8 
08 req.addListener('data', function (chunk) { 
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09 postData += chunk; 
10 }) .addListener('end', function () { 
4 postData = querystring.parse (postData); 
12 http.get ("http://maps.google.com/maps/api/geocode/json?latlng=" + 
// Google 地 理 位 置 服务 
13 postData.lat + "," + postData.lon + 
// 接收 的 经 纬度 信息 
14 "&language=zh-CN&sensor=true", function ( res) { 
// 请 求 回 调 函 数 
训 扎 RE Teonle = 交 
16 _Fes.setEncoding('utf8')7 // 设置 请 求 编码 
17 _res.on('data', function (chunk) { result 
+= chunk; }); // 获取 请 求 数据 
18 _res.on('end', function () { res.end(result); }); 
// 请 求 结束 返回 结果 
19 Ds; 
20 ]) 7 
21 1}).listen(8080, function () { // 启动 服务 
22 console.log('listening on http://localhost:8080'); 


// Web 服 务 器 启动 成 功 


23 1); 


Node.js 服 务 获取 客户 端 请 求 传送 的 经 纬度 数据 ， 并 将 该 数据 传递 给 谷歌 地 理 位 置 服务 接 


客户 端 ， 见 代码 第 12 


， 接 口 分 析 数 据 后 将 对 应 的 地 理 位 置信 息 返回 


行 ~ 第 19 行 。 


， 服 务 接收 到 完成 的 数据 后 将 该 数据 发 送 给 


焰 ”谷歌 地 理 位 置 服务 请 参考 官网 文档 https://developers.google.comy/maps/documentation/ 


加 不 
| x geocoding/。 


12.8 示例 8 设计 离线 事件 处 理 程序 


12.8.1 示例 效果 


现今 的 Web 世 界 正 在 向 传统 桌面 应 用 挑战 ， 页 面 变 得 越 来 越 复杂 ， 功 
多 ，SPA (Single Page Application) 独立 页 面 应 用 开发 也 变 得 稀 朴 对 
汞 讯 的 WebQQ， 众 多 的 功能 被 集中 在 一 个 页 面 完 成 。 面 对 如 此 庞大 的 功 
载 性 能 面临 着 巨大 的 挑战 。HTML 5 带 来 了 Application 
下 面 通过 在 示例 “开发 简单 的 离线 应 上 
介绍 Application Cache API 相 关 的 技术 和 知识 点 。 


用 如 谷歌 的 Gmail、 
能 集 ， 传 统 页 面 的 加 


了 一 系列 新 特性 支持 离线 引用 缓存 。 


离线 事件 处 理 功 能 ， 
首先 ， 将 本 示例 


F 常 ， 非 常 具有 代表 性 的 应 


Cache API， 提 供 


页 面 文件 和 脚本 言 


”的 基础 上 添加 


8 署 在 Web 服 务 器 上 ， 如 Apache、IIS 或 者 Nginx 等 。 使 
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用 Chrome 打 开本 示例 页 面 地 址 ， 并 添加 若干 条 信息 ， 效 果 如 图 12.24 所 示 。 


© 
妾 名 性 别 年 葵 拔 作 
小 王 男 33 人 弛 
学 区 22 而 队 个 隐 
小 周 田 34 [4 


图 12.24 使 用 Chrome 打 开本 示例 页 面 地 址 


首次 打开 页 面 ， 所 有 请 求 均 获得 服务 器 响应 的 HTTP 状 态 200 信 息 ， 如 图 12.25 所 示 。 


国 gemens 加 Resources |@Y Newwork 08 sourees CN Timeine © proftes rudes [1 consoe 


Name Method Status Type L. Sie Time | 
口 008%ebycaexbe%ebsae%a.，GET 200 -text/html 3 了 ms 
Djqvery-ui-192,custom.css 6ET 200 tet/ess 村 32.4I@ Gm 
DD gridess 6ET 200 tot/ess 加 35IB 61m 
Djquery-103js GET 200 application/javascript 262K8 I05ms 
jquery-ui-192.customjs GET 200 application/javascript 454KB 123ms 
口 mswebsQtjs 6ET 200 application/javascript 64KB im 
[Dbartop.png 6ET 200 image/png 车 484B DBlms 
口 bgef 6ET 200 image/gif 过 LIKB Boms 
回 addpng SET 200 image/png 局 118 lms 
图 12.25 页 面 


刷新 当前 页 面 ， 部 分 请 求 的 Size 区 域 标 识 为 fom cache 表 示 该 条 请 求 数 据 从 浏览 器 内 部 缓 
存 中 获取 ， 可 以 非常 明显 地 看 到 请 求 耗 时 〈Time) 又 减 ， 如 图 12.26 所 示 。 


国 ements Resources |(@ Newwort] D8 sources CR Timeine © proftes 以 wa [I consoe 
sae 


Name Method Status Type [更 Time | 
[D000.%e8%ae%beY%edae%a,. GET 200 tt/html 人 from cache) 4ms 
[Djquery-ui-19.2.customess 。 6ET 200 tot/ess From cache) 15ms 
口 gidess GET 200 tet/ess om cache) gms 
D] jquery-18.3js GET 20 application/javascript (from cache) Hms 
jquery-ui-19,2.customjs GET 200 application/javascript (from cache) lms 
口 mewWebsaLjs GET 304 application/javascript 1958 3Dms 
口 bgef GET 200 image/aif | (from cache) ms 
addpng GET 200 image/png (fom cache) ms 
DD bartop.png GET 200 image/png ~ | (from cache) gm 


图 12.26 刷新 当前 页 面 


更 新 appcache.manifest 文 件 ， 使 用 “#?” 符 号 注释 “../js/ijiquery-ui-1.9.2.custom.js”， 保 存 
后 关闭 ， 修 改 后 的 代码 如 下 : 


CACHE MANIFEST 
CACHE: 


#../js/jquery-ui-l1.9.2.custom.js 
-../js/jquery-1.8.3.js 
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5 if (window.applicationCache.status == 
window.applicationCache.UPDATEREADY) { 

16 window.applicationCache.swapCache () 7 // 替换 旧 缓存 内 容 

1 var wraper = $('<p> 是 否 更 新 缓存 文件 ? </p>') 7 

18 $ (document .body) .append (wraper); // 添加 弹出 节点 

19 wraper.dialog ({ // 弹出 提示 浮 层 

20 position: 'center'，title: ' 提 示 '，modal: true, 

2 buttons: [{ text: "确认 "， 

22 click: function () { window.location.reload(); } 


// 刷新 当前 页 面 


23 TREEEzEc 到 市 吧 

24 click: function () { $(this).dialog("close"); } 
// 关闭 按钮 事件 

25 }] 

26 ]) 7 

2 wraper.dialog('open') 7 // 弹出 复 测 

28 ] 7 

29 }, false); 

30 }, false); 


31 </script></html> 


首先 注意 到 ， 在 HTML 的 起 始 节 点 上 增加 了 manifest 属 性 ， 可 以 通过 相对 或 绝对 路 径 设 
置 ， 但 必须 保证 manifest 文 件 与 当前 页 面 处 于 同一 域名 下 。manifest 指 向 的 文件 可 以 是 任意 
的 后 级 ， 但 是 MIME Type 必 须 是 text/cache-manifest。 如 果 使 用 的 是 Apache 服 务 器 ， 可 以 在 


Apache 程 序 


录 的 conf 文 件 夹 内 找到 mime.types 文 件 ， 并 添加 一 行 信息 ， 上 


文件 的 支持 ， 代 码 如 下 : 
text/cache-manifest manifest 
本 示例 manifest 文 件 appcache.manifest 的 代码 如 下 : 


CACHE MANIFEST 


CACHE: 


../js/jquery-ui-1.9.2.custom.js 
../js/jquery-1.8.3.js 
../css/grid-css 
../css/jquery-ui-1.9.2.custom.css 
../css/images/grid/bg.gif 
../css/images/grid/add.png 
../css/images/grid/bar_ top.png 
NETWORK: 


大 


文件 以 CACHE MANIFEST 开 
存 ，NETWORK 下 列举 的 文件 表示 除 CACHE 内 的 均 通 过 网 络 1 


查 


对 manifest 


下 载 ， 均 支持 通配符 选择 。 


| 力 趟 Chrome 下 可 以 通过 访问 chrome://appcache-internals/ 来 查看 或 者 清除 离线 缓存 数据 。 


下 面 分 析 页 面 中 的 脚本 逻辑 ， 见 代码 第 12 行 ~ 第 30 行 。 
代码 第 13 行 监听 离线 缓存 对 象 applicationCache 的 updateready 事 件 ， 当 manifest 文 件 产生 变 


后 级 


头 ，CACHE 下 面 列举 的 文件 在 第 一 次 访问 以 后 会 被 浏览 器 组 
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外 人 
HTML 5 手机 遥控 人 
PPT 第 13 章 


本 章 将 展示 一 个 通过 在 手机 界面 上 进行 左右 滑动 来 远 端 操控 多 个 PPT 的 
翻动 效果 。 整 个 实例 运用 了 多 种 新 技术 框架 ， 如 HTML 5 的 WebSocket、 
CSS 3 的 动画 、Node.js 的 Web 应 用 框架 Express、Node.js 的 通信 类 库 
Socket.IO 等 。 本 章 将 结合 新 技术 和 使 用 场景 ， 向 读者 介绍 不 同 技术 在 现实 
场景 中 的 运作 机 制 。 

本 章 知识 点 : 


。 使 用 移动 设备 访问 控制 器 页 面 
。 index 路 由 的 逻辑 规则 

。 handle 路 由 的 逻辑 规则 

。 Consolidate.js 库 


13.1 控制 器 页 面 预览 


首先 ， 确 保本 机 已 经 安装 Node.js 〈 可 以 参考 第 4 章 的 环境 搭建 ) ， 打 开本 例 对 应 的 代码 
文件 夹 ， 如 图 13.1 所 示 ， 其 中 各 文件 夹 的 意义 如 下 : 


。 server.js 存 放 主 要 功能 的 逻辑 脚本 。 

。 package.json 存 放 模 块 的 描述 信息 。 

。 node modules 文 件 夹 用 于 存放 程序 依赖 模块 。 

。 public 文 件 夹 用 于 存放 页 面 用 到 的 图 片 、 样 式 和 脚本 。 
。 routes 文 件 夹 用 于 存放 请 求 路 由 的 脚本 逻辑 文件 。 

。 views 文 件 夹 用 于 存放 静态 页 面 的 模板 文件 。 


名 称 < 

dE node_modules 
dd public 

BM routes 

BB views 


国 package. json 


园 server js 


到 13.1 实例 代码 文件 


人 HTML 5amrazmr .ee 。., 。..  . . .. 


在 Windows 系 统 下 打开 命令 行进 入 刚才 的 文件 来， 执行 命令 如 下 : 
node server.js 
如 果 启动 成 功 ， 命 令 行 提示 如 下 : 
info - socket.io started 
Express server listening on port 3000 


使 用 Chrome 浏 览 器 访问 地 址 “http://localhost:3000/#Wbored”， 页 面 信息 内 容 为 受 “ 菲 特 ” 
风 影 响 的 余姚 市 的 相关 介绍 ，PPT 使 用 Impress.js 类 库 ( 该 类 库 使 用 CSS 3D Transforms 的 旋 
扭曲 、 缩 放 等 特性 制作 ， 它 是 供 开发 者 使 用 的 表现 层 演示 工具 〉， 效 果 如 图 13.2 所 示 。 


i 


江 三 角 洲 南 翼 ， 东 与 宁波 市 江北 区 、 
x 相 邻 ， 南 棺 四 明山 , 与 奉 
西 连 上 虞 市 , 北 毗 甘 
, 此 北 于 钱 坑 江 、 杭 州 湾 中 心 
盐 县 交界 。 


图 13.2 PPT 显 示 端 页 面 效果 


使 用 Chrome 浏 览 器 访问 地 址 “http://localhost:3000/handle”， 该 页 面 为 PPT 的 控制 器 ， 如 
果 是 非 触 屏 设备 的 浏览 器 访问 ， 可 以 通过 单 击 页 面 ， 同 时 向 左 向 后 滑动 对 显示 端的 PPT 进 行 
前 后 翻 页 切换 ， 控 制 器 页 面 效 果 如 图 13.3 所 示 。 


图 13.3 控制 器 页 面 


单 击 控制 器 页 面 中 心 区域 ， 此 时 出 现 一 个 红色 方块 ， 向 右 拖 动 后 松 开 鼠标 ， 效 果 如 图 
13.4 所 示 。 
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所 © Dlocalhost:3000/handle ?I@@ 包 三 


从 左 向 右 拖 动 


图 13.4 单 击 控制 器 页 面 并 向 右 拖 动 鼠标 
查看 主 PPT 页 面 ， 幻 灯 片 由 第 1 张 切换 至 第 2 张 ， 效 果 如 图 13.5 所 示 。 


ED 
¢ 


© | localhost:3000/¢/bore, 


I 枯 四 明山 , 与 奉化 
上 虞 市 , 沙 陛 问 涡 1 


bi 上 海 


仅 帘 1 小 时 ， 余 姚 已 纳入 上 海 "一 小 叶 
交通 图 " 


图 13.5 PPT 页 面 幻灯 片 向 下 一 页 切换 


13.2 使 用 移动 设备 访问 控制 器 页 面 


接 下 来 ， 使 用 移动 设备 访问 控制 器 页 面 ， 有 两 种 方法 可 以 访问 部 署 页 


。 第 1 种 是 将 部 署 机 器 的 人 P 和 端口 暴露 给 外 网 ， 手 机 可 以 直接 访问 对 应 的 外 网 人 P 地 址 ; 
。 第 2 种 是 将 手机 和 服务 器 连接 在 统一 网 关 的 网 络 ， 比 如 连接 到 同一 台 路 由 器 。 


笔者 这 里 选择 的 是 第 2 种 方式 ， 接 着 ， 获 取 服 务 器 端的 下 地 址 ， 可 以 通过 在 Windows 下 打 
开 命 令 行 输入 获取 ， 命 令 如 下 : 


ipconfig 
获取 下 地 址 命令 行 提示 信息 如 图 13.6 所 示 。 


回 
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图 13.6 当前 机 器 的 IP 地 址 


下 面 通过 手机 浏览 器 访问 控 器 页 面 〈 笔 者 这 里 使 用 的 手机 为 Android 系 统 ， 采 用 默认 自 
带 的 浏览 器 访问 ) ， 通 过 ipconfig 命 令 获 取 的 服务 器 地 址 为 192.168.32.163， 则 访问 的 控制 器 
页 面 地 址 为 http://192.168.32.163:3000/handle， 效 果 如 图 13.7 所 示 。 

单 指 触 碰 屏 幕 并 向 右 滑动 ， 页 面 出 现 红色 甜 形 框 并 向 右 移动 (效果 与 鼠标 操作 PC 端 浏 览 
器 相似 ) ， 如 图 13.8 所 示 。 


令 明 亩 18:29 


司 http: 1/192. 168. 32. 163: 3... 


http://192.168.32.163:3... 


国 =… 国 


从 左 向 右 滑动 


到 13.7 手机 浏览 器 访问 控制 器 页 图 13.8 触 屏 版 操作 控制 器 页 面 


本 实例 还 有 一 个 功能 ， 用 不 同 的 终端 访问 PPT 页 面 ， 可 以 通过 同一 个 控制 器 来 进行 前 后 方 翻 
不 ”页 控制 ， 同 时 保证 各 PPT 页 面 同 步 操作 运行 ， 该 功能 通过 HTML 5 的 WebSocket 实 现 ， 利 用 了 
Socket.IO 通 信 类 库 ， 下 面 的 代码 分 析 环 节 会 介绍 相关 的 技术 要 点 。 


第 13 章 ”HTML 5 手机 遥控 PPT 


13.3 代码 设计 和 分 析 


13.3.1 启动 服务 器 


首先 看 serverjs 脚 本 ， 该 脚本 主要 负责 启动 Express 框 架 搭 建 的 Web 服 务 器 和 SocketIO 类 库 
搭建 的 Socket 服 务 器 ， 代 码 如 下 ; 


01 
02 


var express = require('express'); // 获取 express 模 块 用 于 构建 Web 服务 
Var routes = require('./routes'); // 获取 routes 模 块 用 于 页 面 路 由 

var http = require('http'); // 获取 http 模 块 处 理 请 求 信 息 和 创建 服务 

var path = require('path'); // 获取 path 模 块 用 于 处 理 文件 路 径 

var app = express(); // 新 建 一 个 express 服 务实 例 

var cons = require('consolidate'); // 获取 consolidate 模 块 ， 用 于 处 理 模 板 引擎 
app.set('port', process.env.PORT || 3000); // 设置 服务 器 的 端口 号 


app.set('views', _ dirname + '/views'); // 设置 服务 器 页 面 模板 地 址 
app.engine('html', cons.swig); // 设置 swig 模 板 作为 服务 器 模板 引擎 
app.set('view engine', ‘'html'); // 设置 模板 引擎 
app.use (express.favicon()); // 设置 页 面 图 标 
app.use (express.logger('dev')); // 开启 请 求 记录 


app.use (express.bodyParser()); // 使 用 中 间 件 bodyParser 对 请 求 包 体 进行 解析 

app.use (express.methodoverride()); // 处 理 PosT 请 求 伪装 PUT 等 其 他 HTTP 方 法 

app.use (app.router); // 设置 启动 路 由 功能 

app.use (express.static(path.join(_ dirname, 'public'))); 

// 设置 服务 器 静态 文件 目录 

app.get('/', routes.index); // 配置 '/' 路 由 映射 的 逻辑 模块 

app.get('/handle',require('./routes/handle') .handle); 

// 配置 ' /handle' 路 由 映射 的 逻辑 模块 

var server = http.createsServer (app); // 创建 一 个 Web 服 务 器 

server.listen(app.get('port'), function(){ 

// 启动 Web 服 务 器 并 监听 指定 端口 
console.1log('Express server listening on port ' + app.get('port')); 

]) 7 

Var io = require('socket.io').listen(server); 

// 启动 socket 服 务 并 监听 web 服 务 端口 

io.sockets.on('connection'，function (socket) { // 监听 远 端 Websocket 接 入 
socket .emit ('news'，' 欢 迎 加 入 Websocket' ); // 向 指定 Websocket 发 送 消息 
socket.on('handle'，function (data) { // 监听 自 定义 handle 事 件 ， 并 接收 消息 

io.sockets.emit ('direction', data); 
// 向 所 有 接 入 的 socket 连 接 发 送 自 定义 信息 
1D); 


代码 第 17 行 、 第 18 行 配置 了 PPT 主 页 面 和 控制 器 页 面 的 路 由 规则 ， 即 当 访问 的 地 址 路 径 
为 对 应 的 规则 时 执行 对 应 的 路 由 逻辑 。 


487 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


@、 |HTML 5 网 页 发 实 由 洋人 


07 
08 
09 
10 
T2 
13 
14 
15 
16 
LA 
18 
19 
20 
之 下 
之 2 


23 
24 
25 
26 
2 
28 
29 
30 
3 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 


49 
50 
5I 
52 


53 
54 
55 
56 


<style type="text/css"> 


body { background-color: green; } <!-- 控制 器 底 色 --> 
.move{ <!-- 拖 动 提示 块 样式 --> 
background-color: red; 
width: 50px; height: 50px; 
position: absolute; 
Test 07 tops OF 
Cursor: moves; 
} 
p{ margin: 0; padding: 0; } <!-- 操作 日 志 列 表 样式 --> 
</style> 
</head> 
<body> 
<div class="move" style="display:none"></div> <!-- 拖 动 提示 块 --> 
</body> 
<script src="socket.io/socket.io.js"></script> 


<!-- 引入 socket .I0 通 信和 脚本 --> 


<script> 
var socket = io.connect (location.origin); // 建立 socket 连 接 
Var move div = document .querySelector('div.move'), start; 
function log(msg){ // 1og 函 数 用 于 在 页 面 上 显示 操作 日 志 
Var p = document .createElement ('p'); 
p.innerHTML = msg; 
document .body.appendCchild (p); 
}; 
function get postion(e , type){ // 根据 事件 类 型 获取 鼠标 当前 的 位 置 
Var pos={}; 
if( e.type == type){ // 判断 nousedown、mousemove 事 件 
pos.x = e.pageX || e.clientx; // 获取 鼠标 的 x 轴 位 置 
pos.y = e.pageY; // 获取 鼠标 的 Y 轴 位 置 
}elsef{ 
if(e.targetTouches.length >= 1){ // 元 素 内 有 手指 触摸 
Var touch = e.targetTouches[0]; // 获取 手指 列表 的 第 一 个 
pos.x = touch.pagex; // 获取 手指 触摸 点 的 x 轴 位 置 
pos.y = touch.pageY; // 获取 手指 触摸 点 的 Y 轴 位 置 
} 
}; 
return pos; 
} 
function start(e){ // 拖 动 开始 函数 
move div.style.display = "''; // 显示 拖 动 提示 方块 
start = get postion(e, 'mousedown') .x; // 记录 拖 动 地 点 的 X 轴 坐标 
document .addEventListener('mousemove',move,false); 
// 监听 元 素 的 鼠标 移动 事件 
] 
function end(e){ // 拖 动 结束 函数 
move div.style.display = 'none'; 
Var method , end = parseInt (move div.style.left); 
// 获取 方块 的 结束 位 置 
if(end > start){ // 结束 位 置 大 于 初始 位 置 时 ， 为 向 右 滑动 
method = "next'7 
}else if (end < start){ // 结束 位 置 小 于 初始 位 置 时 ， 为 向 左 滑动 
method = 'prev'; 
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加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


UL 第 14 章 。 响应 式 设计 之 新 闻 阅 读 列表 设计 


(1) 当 屏 幕 分 辩 率 小 于 等 于 480px (手机 ) 和 767px 《平板 ) 时 ， 原 型 如 图 14.1 所 示 。 主 


包括 可 以 查看 阅读 列表 、 收 藏 列表 和 喜欢 列表 的 核心 功能 。 


接 ”、 


(2) 当 


A Web Page 
GexGe De 


吃 乔布斯 经 典 演讲 回顾 (arita.ce)} 


22 个 评论 30 人 豆 欢 乔布斯 apple 


侣 四 售 


只 乔布斯 经 典 演讲 回顾 (orltoa.cc) 
22 个 评论 30 人 喜欢 乔布斯 opple 
只 乔布斯 经 典 演讲 回顾 (arita.cc)} 


22 个 评论 30 人 喜 次 乔布斯 opple 


上 乔布斯 经 典 演讲 回顾 (orita.cc) 


22 个 评论 30 人 喜欢 弄 布 斯 opple 


罗 乔布斯 经 典 演讲 回顾 (arito .cc) 


22 个 评论 30 人 豆 欢 戏 布 类 opple 


力 乔布斯 经 典 演讲 回顾 (arita.cc) 


22 个 评论 30 人 喜欢 乔布斯 opple 


图 14.1 原型 图 


全 查看 


人 局 ” 
去 内 


幕 分 辨 率 大 于 767px〈 平 板 ) 小 于 1240px 时 。 屏 幕 变 大 时 ， 需 要 将 第 
的 功能 加 入 到 页 面 中 ， 根 提 
以 及 显示 网 站 Logo 等 功能 ， 原 型 设计 图 如 图 14.2 所 示 。 


居 设 计 原则 ， 在 767px~1240px 范 围 内 ， 加 入 “搜索 ”、 


由 乔布斯 经 典 演讲 回顾 (orita.cc) 
22 个 评论 30 人 喜欢 弄 布 两 opple 

只 乔布斯 经 典 演讲 回顾 (orita.cc) 
22 个 评论 30 人 喜欢 弄 布 凑 opple 

中 乔布斯 经 典 演讲 回顾 (orita.cc) 
22 个 评论 30 人 喜欢 乔布斯 opple 


四 乔布斯 经 典 法 讲 回顾 (orita cc) 
22 个 评论 30 人 喜欢 乔布斯 apple 


力 乔布斯 经 典 演讲 回顾 (orita.cc) 
22 个 评论 30 人 喜欢 乔布斯 opple 
中 乔布斯 经 典 演讲 回顾 (orita.cc) 
22 个 评论 30 人 喜欢 乔布斯 opple 


| 


14.2 宽度 大 于 767px 小 于 1240px 时 的 原型 图 


“ 友 
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@ |HTML 5 网 页 发 实 四 洋人 


(3) 如 果 屏 幕 宽度 大 于 1240px， 则 把 右 侧 边栏 也 显示 出 来 ， 原 型 设计 如 图 14.3 所 示 。 


败 乔布斯 经 典 演讲 回顾 (arita.cc) 

2 个 评论 30 人 喜欢 乔 布 所 opple 

吃 乔布斯 经 典 演讲 回顾 (arita cc) 

2 20 要 天 有 所 opt 

吃 乔布斯 经 典 演讲 回顾 (orka.cc) 
2 个 评论 30 人 再 次 弄 布 氛 opple 


要 11DS7 库 办 丁 没 计 深度 部 析 
4 琶 页 
永福 中 的 关 友 ni 识 
ve 


吃 乔布斯 经 典 演讲 回顾 (orita.ce) Node 内 有关 襟 了 件 么 了 
469 披 村 


2 个 评 沦 30 人 本 欢 天 看 耻 opple 


吃 乔 布 斯 经 典 演讲 回顾 (orita co) 


2 个 评论 30 人 贡 欢 天 有 须 opple 


吃 乔布斯 经 典 演讲 回顾 (orta.cc) 


2 个 评论 30 人 再 欢 天 也 opple 


图 14.3 屏幕 宽度 大 于 1240px 时 的 原型 图 


14.2 模块 设计 


原型 设计 完成 后 ， 视 觉 设 计 师 与 前 端 开发 工程 师 可 以 根据 原型 做 模块 设计 。 根 据 原型 分 
析 ， 主 要 模块 包括 图 14.4 所 示 的 5 个 模块 。 


。 主体 内 容 模块 : 该 模块 是 最 重要 的 内 容 ， 所 以 不 管 在 任何 屏幕 分 辨 率 下 ， 均 需要 显示 。 

。 左 侧 导航 模块 : 该 模块 提供 左 侧 导航 ， 当 分 辩 率 小 于 767px 时 ， 不 显示 。 

。 移动 版 本 页 头 模 块 :该 模块 是 在 分 辨 率 小 于 767px 时 ， 提 供 的 小 屏 导 航 区 块 ， 即 小 于 
767pX 时 ， 左 侧 导 航 不 显示 ， 移 动 版 本 页 头 导 航 显示 。 

。 侧 边栏 : 侧 边栏 属于 辅助 功能 模块 ， 仅 当 屏 幕 分 辨 率 大 于 1240px， 有 足够 的 空间 时 
才 显示 。 

。 右上 角 功 能 区 域 : 该 区 域 提供 辅助 功能 ， 虽 然 也 是 及 其 重要 的 功能 ， 但 在 移动 版 本 
时 ， 基 本 不 会 使 用 ， 所 以 当 屏 幕 分 辨 率 小 于 767px 时 ， 不 显示 。 


模块 设计 分 解 效果 如 图 14.4 所 示 。 
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右上 功能 区 


14.4 模块 设计 分 解 


14.2.1 视觉 模块 设计 


| 
出 


视觉 设计 师 需要 根据 不 同 的 分 辨 率 给 出 不 同 的 设计 方案 ， 但 每 个 模块 之 间 的 过 渡 要 求 能 
够 紧密 衔接 ， 不 能 产生 视觉 上 的 过 于 冲击 的 效果 。 因 此 需要 有 整体 的 视觉 概念 。 视 觉 设 计 师 


需要 根据 480px、767px、979px、1240px、1500px 的 屏幕 分 辩 率 宽度 设计 出 5 个 不 同 的 版 本 。 


加 
a 如 767px、979px、1240px 等 。 


14.2.2 前 端 模 块 设计 


在 实际 应 用 中 ， 可 能 由 于 设计 师资 源 等 原因 ， 来 不 及 设计 出 5 个 不 同 的 版 本 ， 而 是 3 个 版 本 


根据 响应 式 的 概念 ， 每 一 个 模块 之 间 都 要 求 能 够 互相 解 簿 ， 依 据 这 个 原则 ， 设 计 的 5 个 


前 端 模块 代码 如 下 ; 
01 <div id="top-menu"></div> 
02 <xdiv id="top-menu-mobile"></div> 
03 <div id="fixed-menu"></div> 
04 <div class="outer-wrap"> 


05 <div id="main-container"> 

06 <div id="main"> 

07 </div> 

08 </div> 

09 <div id="sidebar"> 

10 <div class="sidebar-inner" > 
LE </div> 

12 </div> 

13 </Adiv> 


<!-- 右上 角 项 部 导航 --> 
<!-- 移动 版 本 项 部 导航 --> 
<!-- 左 侧 导 航 --> 


<!-- 主体 内 容 区 域 --> 


昌 二 一 右 侧 边 栏 三 二 


5 个 模块 对 应 的 CSS 样 式 ， 具 体 解释 见 注释 部 分 ， 代 码 如 下 : 


01 #top-menu { <!-- 顶部 右 侧 导 航模 块 --> 
02 position: fixed; <!-- 采 用 fixed 定 位 模式 ， 保 证 其 在 右上 角 位 置 --> 
03 toB215BDE7 <! 一 -距离 最 顶端 5px --> 
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QH sae IE 


04 Ee <!-- 使 其 靠 在 最 右 侧 --> 

05 z-index: 999; 

06 height: 29px; 

07 width: 140px; 

08 font-size: 20px; 

09 background-image: url("top-menu-bg.png"); 

10 1j} 

11 #top-menu-mobile { <!-- 移动 版 本 顶部 导航 模块 --> 
&2， display: none; <!-- 该 模块 默认 不 显示 --> 

3 position: fixed; <!-- 采用 fixed 定 位 模式 ， 保 证 其 不 随 滚动 而 改变 位 置 --> 
14 top: Opx; <!-- 使 其 靠 在 最 顶端 --> 

本 left: 07 <!-- 使 其 靠 在 最 左边 --> 

16 Znmoer 999> 

0 width: 100%; <!-- 宽度 设置 为 100$， 使 其 充满 整个 宽度 --> 
18 height: 33px; 

19 padding-top: 10px; 

20 background-color: #282828; 

21 font-size: 24px; 

区 Color: fff> 

pr} text-align: center; 

2 人 时 

25 #fixed-menu { <!--” 左 侧 导 航模 块 --> 

26 background: #1ldldld; 

27 position: fixed; <!-- 采用 fixed 定 位 模式 ， 保 证 其 不 随 滚动 而 改变 位 置 --> 
28 top: 0; <!-- 使 其 靠 在 最 顶端 --> 

29 left: 07 <!-- 使 其 靠 在 最 左边 --> 

30 width: 250px; 

31 z=index: 9987 

32 height: 100%; <!-- 高 度 设置 为 1008， 使 其 充满 整个 高 度 --> 
33 overflow: hidden; 

34 border-right: 2px solid rgba(255,255,255,0.85); 

35 padding-top: Spx; 

36 1} 

37 .outer-wrap { 

38 min-height: 100%; 

39 position: relative; 

40 margin-left: 260px; <!-- 留 出 左 侧 260px 给 左 侧 导航 --> 
41 margin-top: Spx; 

42 } 

43 #main-container { <!-- 主体 内 容 模块 --> 

44 float: left; 

45 width: 100%; 

46 margin-right: -330px; <!-- 默认 留 出 330px 给 右 侧 边栏 模块 --> 
47 padding-bottom: 100px; 

48 } 

49 #main { 

50 background: #fff; 

3 margin-right: 330px; 

四 这 border-right: lpx solid rgba(0,0,0,0.1); 

2 

54 #sidebar { <!-- 右 侧 边栏 区 块 --> 
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position: relative; 
Hoat: left> 
padding: 23px 52px 0 10px; 
width: 328px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

了 


14.2.3 使 用 Media Queries 自 适应 各 种 分 辩 率 的 客户 端 


媒体 查询 (Media Queries) 是 CSS 3 的 一 个 新 特性 ， 可 以 自动 适应 屏幕 分 辩 率 而 使 用 不 同 
的 CSS 样 式 ， 以 达到 自 适 应 设备 和 屏幕 分 辩 率 的 技术 手段 。 以 下 是 本 实例 页 面 的 5 个 模块 在 不 


同 分 辩 率 下 的 不 同 响应 ， 具 体内 容 见 代码 注释 部 分 ， 代 码 如 下 : 


01 


02 
03 
04 
05 
06 


07 
08 
09 


10 
下 下 
12 
13 
14 
15 
16 
到 
18 
19 
20 
2 
4 
23 
24 
25 
26 
pw 
六 站 
4 
30 
人 
32 


@media screen and (min-width: 1500px) { 
<!-- 当 屏 幕 分 辩 率 大 于 1500px 时 ， 应 用 此 样式 --> 


#main-container { 


max-width: 1240px; <!-- 主体 内 容 模块 宽度 最 大 为 1240px --> 


} 
.inner-listing .main a:nth-child(2) { 
font-size: 18px !important; 
<!-- 大 分 辩 率 ， 大 字体 ， 字 体 大 小 设置 为 18px --> 
} 
} 


@media screen and (max-width: 1240px) { 


<!-- 当 屏 幕 分 辩 率 小 于 1240px 时 ， 应 用 此 样式 --> 


#sidebar { 
display: none; <!-- 右 侧 边栏 模块 不 显示 --> 
} 
#main-container { 
margin-right: -120px; <!-- 主题 内 容 模块 右 间距 调 小 --> 
} 
#main { 


margin-right: 120px; 
border-right-style: none; 
} 
@media (max-width: 979px) { <!--— 当 屏 幕 分 辩 率 小 于 979px 时 ， 应 用 此 样式 --> 


.inner-listing .main a:nth-child(2) { 


font-size: 14px !important; <!--— 字体 大 小 从 18px 变 为 1 4px ee 
max-width: 95% !important; <!-- 主体 内 容 模块 列表 页 宽度 变 小 --> 


} 
.outer-wrap { 
margin-top: 20px; 
} 
#main-container { 
margin-right: 0; <!-- 主题 内 容 模块 右 间距 设 为 0 --> 
下 


#main { 
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33 margin-right: 07 
34 } 
35 7 
36 emedia (max-width: 767px) { <!-- 当 屏 幕 分 辩 率 小 于 767px 时 ， 应 用 此 样式 --> 
二 肖 body { 
38 padding-right: Spx; 
有 padding-left: 1l0px; 
40 } 
41 #fixed-menu { 
42 display: none; <!-- 左 侧 导航 模块 隐藏 ， 不 显示 --> 
43 | 
44 #top-menu { 
45 display: none; <!-- 顶部 右 侧 导航 模块 不 显示 --> 
46 i 
47 #top-menu-mobile { 
48 display: block; <!-- 显示 移动 版 本 顶部 导航 模块 --> 
49 } 
50 #top-stripe { position: fixed; top: 43px; left: 0; } 
51 -outer-wrap { margin-left: 0; margin-top: 48px; } 
3 之 #main-container { margin-right: 0; } 
S53 #main { margin-right: 0; } 
54 #back-to-top { display: none !important; } 
S50 
56 Q@media (max-width: 480px) { <!-- 当 屏幕 分 辩 率 小 于 480px 时 ， 应 用 此 样式 --> 
Eh .article .inner-listing { 
58 margin-left: 0 !important; 
<!-- 主体 内 容 模块 列表 页 间距 设置 为 0 --> 
三 六 margin-right: 0 !important; 
60 } 
61 让 


所 _ 
| 臣下 本 实例 具体 的 代码 见 光盘 文件 。 


14.3 运行 效果 


本 实例 在 Chrome 浏 览 器 下 运行 通过 ， 请 使 用 Chrome 浏 览 器 打开 本 实例 ， 在 1500 以 上 的 分 
辨 率 下 运行 ， 效 果 如 图 14.5 所 示 。 
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人 nae 
~ SiO cocrah 

于 科 家 久 | 有 上 年 我 们 一 起 和 xss treorem oral 
~ RA down vot iE7 nil 


~ Bash One-Liners Explained 各 文 二) fkodange.com) 


~ 码 胡 局 乔 用 到 的 一 此 技术 manena ol 


| 


“190+ 扫 训 开发 效率 的 wm 党 用 人 人 tenblogs com 


~ 网 昌 云 所 半 册页 机 加 丸和 设 计 总 统 gianahu ol 


~ 要 要 全 理 守 时 一 上 tmindmetster coml 


~ 来 让 于 内 中 由 类 六 的 EE[] devthaa coml 


妈 14.5 1500 以 上 分 辨 率 运 行 效果 


查 _ 
-六 本 实例 还 采用 了 “(@font-face” 技 术 来 实现 各 种 图 标 。 


手动 拉动 浏览 器 宽度 ， 当 宽度 缩小 到 1239px 时 ， 右 侧 边栏 隐藏 ， 如 


斯 经 演讲 回顾 (arta ce 


IT News 


人 好 1s 本 px86 的 让 所 抽 copysh 
< 些 年 我 们 一 looyuno 

全 是 时 候 加 入 down vote 功能 了 :-) (nil 

和 Bash One-Liners Explained 译文 (二 ) (kodango.coml 
人 ^ 玛 农 周刊 用 到 的 一 些 技术 (manong jio) 


a 


<^ 130+ 提高 开发 效率 的 vim 常用 命令 (cnblogs.com) 


理 和 部 署 SHOME 下 dot fles 的 Bash 脚本 (github.com} 


^ 网易 云 阅 读 网 页 端 资讯 阅读 器 设计 总 结 (ianshujio) 


司 14.6 右 侧 边栏 隐藏 


14.6 所 示 。 


继续 拉动 浏览 器 ， 当 浏览 器 宽度 达到 766px 时 ， 隐 藏 左 侧 导 航 和 右上 角 导 航 ， 显 示 移 动 


版 本 顶部 导航 ， 如 图 14.7 所 示 。 
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Q.、 IHTML aaa 


全 乔布斯 经 典 演讲 回 顾 (arta.cc} 


268 喜欢 净空 2013.10.13 10:00 apple 乔布斯 ”22 评论 


全 用 JS 写 的 x86 的 虚拟 机 {copy.sh) 


268 喜欢 净空 2013.10.13 10:00 apple 乔布斯 22 评 论 


a 一 起 学 XSS ai 
268 喜欢 净空 2013.10.13 10:00 apple 乔布斯 ”22 评论 


a down vote 2 ni 
268 喜欢 净空 2013.10.13 10:00 apple 乔布斯 22 评论 


全 Bash One-Liners Explained dango.com) 
268 喜欢 净空 2013.10.13 10:00 apple 2 


全 一 些 技术 (mi i 
268 喜欢 净空 2013.10.13 10:00 apple 乔 


全 二 张 图 让 你 看 慌 各 开通 License fshentarmel 


268 喜欢 净空 2013.10.13 10:00 apple 天 布 | 


全 130+ 提高 开发 效率 的 vim 常用 命令 {cnblogs.com) 


268 喜欢 净空 2013.10.13 10:00 apple 乔布斯 22 评 论 


全 一 个 管理 和 部 署 SHOME 下 dot flles 的 Bash 脚本 (github.com) 
268 喜欢 净 衬 2013.10.13 10:00 apple 乔布斯 22 


全 加 易 云 阅读 网 页 端 资讯 阅读 器 设计 总 结 lianshuio) 


图 14.7 平板 电脑 下 自 适应 响应 效果 


继续 缩小 浏览 器 宽度 ， 到 达 480px 时 ， 效 果 如 图 14.8 所 示 。 


全 乔布斯 经 典 演讲 回顾 (arita.cc} 


268 喜欢 净空 2013.10.13 10:00 apple ” 开 布 拓 ”2 评论 


全 用 JS 写 的 x86 的 虚 鬼 机 (copy.sh) 


268 喜欢 净空 2013.10 13 10:00 apple 乔布斯 2 评 论 


全 [腾讯 实 全 教程 ] 那些 年 我 们 一 起 学 XSS (wooyunorg) 


268 喜欢 净空 2013 10 13 10:00 apple ” 乔 布 折 “22 评论 


全 是 时 候 加 入 down vote 功能 了 :-) (ni 
268 喜欢 净空 2013 10.13 10:00 apple 乔 布 所 


全 Bash One-Liners Explained 译文 (二 ) (kodang..… 


268 喜欢 净空 2012.10.13 10:00 apple 乔 布 所 2 评论 


2 一 Lio) 


268 喜欢 净空 2013.10.13 10:00 apple 


pp 


2 130+ vim ogs.co! 
268 喜欢 净空 2013.10.13 10:00 apple ” 乔 布 岳 ”22 评论 


HOME 下 dot files 的 Bash 
268 喜欢 净空 2013.10.13 10:00 apple 天 布 中 ”到 评论 


全 网 易 云 ianshu,io) 


14.8 手机 浏览 器 下 的 显示 效果 
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14.4 本 章 小 结 


响应 式 设计 已 经 成 为 一 种 设计 趋势 ， 而 响应 式 设计 的 一 般 设计 流程 是 需求 分 析 、 原 型 设 
计 、 模 块 设计 视觉 设计 、 前 端 模 块 设计 〉 ,设计 原则 一 般 是 遵行 “设计 先行 、 内 容 优 先 、 
移动 优先 ”的 原则 。 响 应 式 的 Web 设 计 优 势 明 显 ， 只 需要 开发 一 种 页 面 ， 并 针对 于 不 同 的 分 
辨 率 、 不 同 的 设备 环境 进行 设计 ， 在 开发 、 维 护 和 运营 成 本 上 ， 相 对 于 传统 的 多 种 版 本 的 开 
发 ， 是 绝对 的 优势 。 但 同时 ， 对 于 传统 的 互联 网 交互 设计 和 前 端 实 现 来 说 ， 提 出 了 更 加 高 的 
要 求 ， 设 计 之 初 就 需要 考虑 清楚 不 同 分 辩 率 下 的 页 面 布 局 变化 。 本 章 响 应 式 案例 的 介绍 ， 只 
是 一 个 开始 ， 读 者 还 需要 通过 大 量 的 练习 才能 掌握 响应 式 设计 的 精髓 。 
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附录 A 主流 浏览 器 对 HTML 5 
新 特性 的 支持 情况 


附 表 A.1 CSS 3 


属性 〈V 表示 支持 ，X 表 示 不 支持 ) 


属性 Chrome 25 ”Firefox 15 Opera 12 IE7 IE 8 IE 9 IE 10 
RGBA ~ V ~ x x 

HSLA ~ V ~ x x 

Box Sizing ~ J ~ x V 

Background Size ~ V J x x 

Generated Content ~ ~ V x V 

DataURI ~ ~ J Xx ~ 

Pointer Events ~ ~ x x Xx 

Display: table J ~ J x ~ 

Overflow Scrolling x x x Xx Xx 

Media Queries ~ 以 MM x x 

附 表 A.2 CSS 3 选择 器 ( VY 表示 支持 ，X 表 示 不 支持 ) 
Chrome 25 Firefox15 Opera 12 E 

Begins with J ~ ~ x J ~ J ~ 
Ends with IY V J x * | IY 加 
Matches | v Y Y 六 vv |v |y Y 
Root | 区 2 J x x .|x | 加 
nth-child | 本 区 4 x x |x | V 
nth-last-child | 若 : 六 x [x | J 


附录 A 主流 浏览 器 对 HTML 5 新 特性 的 支持 情况 


( 续 表 ) 


属性 Chrome 25 Firefox15 Opera 12 IE6 虑 渗 IE8 IES9 IE 10 
y 
y 
v 
Y 
only-child ~ ~ J x x x ~ J 
only-of-type ~ J ~ x x x J J 
empty J ~ J x x x J V 
target V ~ J x x x ~ V 
enabled V J J x x x ~ V 
disabled V V V x x x V 以 
checked y ~ ~ x x x ~ V 
Dot V J ~ x x x ~ V 
General Sibling V V ~ x V ~ J 
附 表 A.3 HTML 5 Web 应 用 程序 ( Vv 表示 支持 ，X 表 示 不 支持 ) 


属性 

Local Storage 
Session Storage 

Post Message 
Offline Applications 
Workers 

Query Selector 
WebSQL Database 
Indexed Database 
Drag and Drop 

Hash Change (Event) 
History Management 
WebSockets 
GeoLocation 

Touch 

File API 


Chrome 25 Firefox 15 


< 


x 


Opera 12 


而 
9 
而 
et 
而 
oo 
而 
Le 


X|X|Xl|< 人 |Xx|Xx|lxlxlxlxlxl|Xx 


oe 
i 


x|<|Ix|IXx|<|<|Xx|Ix|<|Ix|Ix|<| 和 | 和 


x 


: 


Meter element 


X|X|X 


去 | 二 | 全 
+ 人 |X|< 


Progress element 


| 全 | 全 


X|X|X 
X|X|X 
x|Ix|x 


附 表 A.4 HIML 


un 


Chrome25 Firefox 15 


图 形 与 嵌入 式 内 容 〈V 表 示 支 持 ，X 表 示 不 支持 ) 
Opera 12 


IE 6 了 E 水 IE8 


ul 
‘© 


10 


Canvas J J ~ x ~ 
Canvas Text J J ~ x | x ~ 
SVG J J ~ x Y 
SVG Clipping Paths vy ~ J x ~ 
SVG Inline J ~ ~ x Y 
SMIL a 
WebGL J 
Audio Y 
Video Y x TY 
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附 表 A.5 HTML 5 音频 编 解 码 器 〈 Vv 表 示 支 持 ， 


属性 
Audio: ogg/vorbis J 


Chrome25 Firefox 15 Opera 12 


属性 
Video: ogg/theora ~ 


" 


Video: WebM 


Chrome25 Firefox 15 Opera 12 


X 表 示 不 支持 ) 


IE6 EE 


IE6 IE7 


附 表 A.7 HTML 5 表单 输入 〈 Y 表示 支持 ，X 表 示 不 支持 ) 


属性 
Form: Search 
Form: Phone 


ee 


| 


V 


<|IX|A 


Form: Week 
Form: LocalTime 
Form: Number 
Form: Range 
Form: Colour 


| 


< 


. 


x 
x X|X 
X|X|X|xlxlxlxlxlxlxlxlx 关 lx 


附 表 A.8 HTML 5 表单 


Firefox 15 


Form: Autocomplete 


Chrome25 Firefox 15 Opera 12 


属性 〈( VY 表示 支持 ，X 表 示 不 支持 ) 


Opera 12 


IE6 


X|x|x|x|x 而 
a 
Xx|x|x|xlx 加 
oo 
m 
Lo) 


x|Ix 
x|Ix 


HT 
| 


x 
x 


m 
m 
m 


Form: Autofocus 


Form: List 


Form: Placeholder 


Form: Min 


Form: Max 


Form: Multiple 


Form: Pattern 


Form: Required 


< | | 和 | 和 | 和 | 和 | 和 | 和 | 和 | 生 
Be 


Xx | | | Xx |X | | 和 || 和 


Form: Step 


Xx|xX|x|x|x|x|x|x|x|x 


XIx|xX|x|x|x|x|x|x|x 
x|x|x|x|x|x|x|x|x|x 


x |x |x |x |x |x Ix |x |x 


eT 


提 
I 攻 直 数据 来 源 于 网 站 http://fimbip.com/litmus。 
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附录 B 传统 HTML 标 签 及 说 明 


为 了 让 读者 可 以 轻松 过 渡 和 对 比 ， 这 里 列 出 了 传统 HTML 4 标签 的 说 明 。 
附 表 B.1 文件 基本 标签 和 页 面 设置 标签 


标签 说 明 

文件 类 型 标签 ， 表 示 这 是 一 个 HTML 文 件 
文件 头 标签 ， 标 记 HTML 文 件 头 部 信息 的 开始 和 结束 
在 头 部 信息 下 设置 页 而 的 关键 字 

在 头 部 信息 中 设置 页 面 的 措 述 文字 

在 头 部 信息 中 设置 编辑 工具 

在 头 部 信息 中 设置 作者 信息 

在 头 部 信息 中 设置 限制 搜索 的 方式 

在 头 部 信息 中 添加 版 权 声明 

在 头 部 信息 中 设置 页 面 的 创建 日 期 

在 头 部 信息 中 添加 联系 人 的 邮箱 

在 头 部 信息 中 标明 页 面 使 用 的 语言 

在 头 部 信息 中 设置 网 页 的 定时 刷新 和 跳 转 
在 头 部 信息 中 设置 网 页 的 到 期 时 间 

在 头 部 信息 中 设置 禁止 从 缓存 中 调用 该 页 面 
HTTP-EQUIV="set-cookie" 删除 过 期 的 cookie 


HTTP-EQUIV="window-target" 在 头 部 信息 中 设置 该 页 面 以 独立 窗口 打开 


HTTP-EQUIV=" 过 渡 事 件 ” 在 头 部 信息 中 设置 网 页 的 过 渡 效 果 

基底 网 址 标签 ， 用 来 设置 浏览 器 中 文件 根 目录 的 绝对 路 径 

LINK 页 面相 关 链 接 ， 即 需要 使 用 外 部 文件 时 ， 指 明 链 接 文件 与 页 面 的 位 置 
关系 、 链 接 文件 的 名 称 和 地 址 等 内 容 

页 面 标题 标签 ， 用 于 显示 页 面 的 标题 ， 其 内 容 显示 在 浏览 圳 的 标题 栏 

文件 主体 标签 ， 表 示 文 件 的 主体 内 容 ， 如 页 面 中 真实 显示 的 内 容 

BGCOLOR 设置 页 面 的 背景 颜色 ， 一 般 需要 在 文件 的 主体 标签 内 说 明 ， 即 在 
BODY 标 签 中 使 用 ， 如 <BODY BGCOLOR="red"> 表 示 页 面 背景 是 红色 


设置 页 面 的 背景 图 像 ， 当 该 标签 和 BACKCOLOR 一 起 使 用 时 ， 其 优 


AOL 先 级 将 高 于 BACKCOLOR 标 签 

BGPROPERTIES 用 于 设置 背景 图 像 是 否 随 着 滚动 条 的 运动 而 变化 
TEXT 设置 页 面 的 默认 文字 颜色 

LEFTMARGIN 设置 页 面 的 左边 距 

TOPMARGIN 设置 页 面 上 边 距 


附 表 B.2 超级 链接 的 相关 标签 


A 设置 页 面 中 的 超级 链接 ， 表 示 链 接 内 容 的 开始 和 结束 
HREF 设置 超级 链接 的 链接 地 址 ， 可 以 是 绝对 地 址 和 相对 地 址 


TARGET 用 于 设置 目标 页 面 的 打开 方式 


@ |HTML 5 网 两 下 发 实 四 洋人 


( 续 表 ) 


bh 添加 一 个 错 点 ， 便 于 在 链接 中 找到 相应 的 内 容 


FP 的 某 个 锚 点 


附 表 B.3 页 面 文 字 的 相关 标签 


标签 说 明 
设置 为 不 同 级 别 的 标题 文字 ， 标 题 的 数值 越 小 ， 其 文字 反而 越 大 ， 如 HI] 是 一 级 标 

题 ， 其 文字 最 大 

ALIGN 跟 在 H 标 签 的 后 面 使 用 ， 用 于 设置 标题 文字 的 对 齐 方式 

I、EM 将 文字 设置 为 斜体 样式 

用 于 设置 文字 的 加 粗 

为 文字 添加 下 划 线 

|s | 在 文字 上 添加 删除 线 的 效果 

将 文字 设置 为 上 标 或 下 标的 样式 

设置 文字 为 打字 机 字体 

将 文字 设置 为 引文 格式 

将 文字 设置 为 程序 码 样式 

| KBD | 将 文字 设置 为 键盘 输入 样式 

将 文字 设置 为 变量 声明 的 样式 

BIG、SMALL 字体 加 大 和 缩小 

BLOCKQUOTE 设置 文本 的 缩 进 ， 可 以 庶 套 使 用 

SAMP 样本 字体 ， 使 文字 等 宽 显 示 

DFN 表示 定义 或 说 明 性 文字 ， 一 般 以 斜体 字 表示 

ADDRESS 地 址 标签 ， 一 般 用 于 标签 表示 地 址 的 内 容 ， 如 电子 邮件 地 址 


[mass | 
[wockauoie | 
[sa | 
mm | 
[aDDRESS | 
用 于 设置 天 林 字 的 大 小 
[RE | 
[ENTER | 
[BNE | 


于 设置 文字 的 属性 ， 一 般 需要 和 其 他 一 些 属性 设置 标签 同时 使 用 ， 如 SIZE、 
COLOR 等 

预定 义 格式 标签 ， 表 示 HTML 页 面 中 将 完全 按照 输入 的 效果 来 显示 这 段 文字 
CENTER 设置 其 中 的 内 容 为 居中 对 齐 

BLINK 设置 文字 的 闪 炼 效果 


bi 特殊 字符 空格 ， 由 于 HTML 自 动 忽 略 多 个 空格 ， 因 此 需要 输入 多 个 空格 时 ， 可 以 
en 多 次 使 用 该 标签 


& 和 :组 合 在 HTML 中 利用 “& ”标签 做 前 缀 ， 利 用 “:” 标 签 作 后 级 ， 可 以 显示 一 些 特殊 字 
:组 合 符 ， 如 “&grade” 表 示 注册 商标 的 标签 符号 


附 表 B.4 图 像 与 多 媒体 


IMG 图 像 标签 ， 需 要 和 图 像 的 其 他 属性 同时 使 用 ， 如 SRC 等 

SRC 设置 图 像 的 源 文件 地 址 ， 在 IMG 标 签 中 使 用 

WIDTH、 HEIGHT 设置 图 像 显 示 的 宽度 和 高 度 ， 防 止 图 像 过 大 或 者 过 小 
ALIGN 设置 图 像 与 同行 文字 的 对 齐 关 系 ， 包 括 top、middle、left 等 值 
AIT 设置 当 图 像 不 能 正常 显示 时 ， 页 面 中 显示 出 来 的 替换 文字 
BORDER 为 图 像 设置 边框 
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( 续 表 ) 
标签 说 明 
设置 图 像 与 文字 相连 时 的 水 平 间隔 和 垂直 间隔 ， 可 以 防止 页 面 布局 过 于 拥挤 
设置 低 解析 度 图 像 ， 便 于 用 户 能 很 快 地 看 到 图 像 的 效果 
a 应 用 图 像 地 图 ， 即 通过 图 像 设置 页 面 中 的 超级 链接 ， 同 时 需要 设置 图 像 的 热 区 形 
状 和 热 区 坐标 ， 一 般 在 可 视 化 设计 的 软件 中 能 够 更 方便 地 使 用 ， 如 Dreamweaver 
BGSOUND 为 页 面 添加 背景 音乐 ， 需 要 和 SRC 属 性 一 起 使 用 
SRC 和 BGSOUND 属 性 同时 使 用 ， 表 示 背 景 音 乐 的 文件 地 址 
LOOP 与 BGSOUND 属 性 同时 使 用 ， 表 示 背 景 音 乐 的 循环 播放 次 数 
EMBED 为 页 面 添加 多 媒体 元 素 ， 可 以 是 Flash 动 画 、AVI 文 件 等 
AUTOSTART 在 EMBED 标 签 内 使 用 ， 表 示 多 媒体 文件 是 否 自动 播放 
LOOP 在 EMBED 标 签 内 使 用 ， 表 示 多 媒体 文件 是 否 会 循环 播放 
HIDDEN 在 EMBED 标 签 内 使 用 ， 用 于 隐藏 多 媒体 文件 的 播放 面板 
添加 这 动 文字 
与 MARQUEE 标 签 一 起 使 用 ， 可 以 设置 文字 的 滚动 方向 
与 MARQUEE 标 签 一 起 使 用 ， 设 置 文字 的 滚动 方式 
与 MARQUEE 标 签 一 起 使 用 ， 调 整 文 字 滚 动 速度 
与 MARQUEE 标 签 一 起 使 用 ， 设 置 滚动 延迟 
与 MARQUEE 标 签 一 起 使 用 ， 设 置 文字 循环 滚动 的 次 数 
与 MARQUEE 标 签 一 起 使 用 ， 为 滚动 文字 设置 背景 色 
与 MARQUEE 标 签 一 起 使 用 ， 设 置 滚动 文字 的 背景 面积 
与 MARQUEE 标 签 一 起 使 用 ， 设 置 滚动 文字 的 空白 空间 
附 表 B.5 页 面 布局 
标签 说 明 
DIV 层 标 签 ， 使 层 内 的 元 系 作 为 一 个 整体 出 现 
ALIGN 跟 在 DIV 标签 后 面 使 用 ， 表 示 层 的 对 齐 方式 
STYLE 层 的 样式 设置 
P 段落 标签 
ALIGN 设置 段落 中 的 文字 对 齐 方 式 
BR 换行 标签 ， 连 续 使 用 可 以 多 次 换行 
NOBR 设置 文字 在 页 面 中 不 进行 自动 换行 
WBR 强制 换行 标签 ， 在 使 用 了 NOBR 标 签 后 ， 可 以 通过 该 标签 对 文字 进行 强制 性 的 换行 操作 
HR 插入 水 平 线 
SIZE 位 于 HR 标签 内 使 用 ， 用 于 设置 水 
WIDTH 位 于 HR 标签 内 使 用 ， 用 于 设置 水 
ALIGN 位 于 HR 标签 内 使 用 ， 用 于 设置 水 
NOSHADE | 位 于 HR 标签 内 使 用 ， 将 添加 的 水 平 线 设置 为 实 线 效 果 
COLOR 位 于 HR 标签 内 使 用 ， 用 于 设置 水 平 线 的 颜色 


附 表 B.6 列表 
标签 说 明 
无 序列 表 标签 
有 序列 表 标签 
各 素 的 标签 内 使 用 ， 用 于 设置 列表 的 序号 类 型 。 在 不 同类 型 的 列表 中 ， 其 具体 合 义 也 不 
同 


| 在 OL 标签 内 使 用 ， 用 于 设置 有 序列 表 的 起 始 数值 


509 


(a |HTML 5 网 页 开发 实 网 详 角 


目录 列表 
附 表 B.7 表单 
标签 说 明 
FORM 添加 表单 
ACTION 设置 表单 的 处 理 程序 
NAME 在 FORM 标 签 内 使 用 ， 可 以 设置 这 个 表单 的 名 称 
METHOD 设置 表单 信息 的 传送 方法 


ENCTYPE 设置 表单 的 编码 方式 ， 如 纯 文 本 方式 发 送 

INPUTTYPE | 设置 表单 中 的 控件 类 型 ， 通 过 不 同 的 取 值 来 添加 不 同 的 控件 ， 如 设置 该 属性 值 为 text， 
则 添加 一 个 文本 框 控件 

INPUTNAME “| 为 表单 中 的 控件 设置 名 称 

INPUTVALUE “| 为 表单 中 的 控件 设置 默认 值 

CHECKED 将 表单 中 的 某 个 控件 设置 为 已 选 定 的 选项 

SIZE 设置 控件 的 长 度 ， 用 在 文本 框 、 密 码 域 以 及 文件 域 控件 中 

MAXLENGTH re 例如 设置 为 6， 则 输入 了 6 个 字符 以 后 就 无 法 再 


SELECT 添加 一 个 下 拉 式 的 选单 控件 ， 如 菜单 、 列 表 

SIZE 设置 选单 显示 的 项 目 数 ， 如 列表 中 包含 的 列表 项 数目 

i 设置 选单 控件 中 的 选单 项 目 ， 每 一 个 OPTION 标 签 就 表示 一 个 选单 项 ， 因 此 设置 SIZE 属 
性 为 多 少 ， 就 应 该 有 多 少 个 OPTION 标 签 

NAME 在 SELETE 标 签 内 使 用 ， 可 以 设置 选单 控件 的 名 称 

VALUE 用 于 设置 选单 控件 中 各 个 选项 的 值 


SELECTED 设置 该 选单 项 默认 情况 下 已 被 选中 


MULTIPLE 用 于 设置 列表 项 目 ， 在 SELETE 标 签 中 添加 该 标签 ， 表 明 这 个 选单 控件 是 一 个 多 选 控 
件 ， 用 户 可 以 同时 选中 多 个 选项 


TEXTAREA 添加 一 个 文本 输入 区 域 控件 ， 一 般 用 来 创建 能 够 输入 多 行文 本 的 区 域 
NAME 在 TEXTAREA 标 签 内 使 用 ， 可 以 设置 该 文本 区 域 的 名 称 
在 TEXTAREA 标 签 内 使 用 ， 用 于 设置 输入 区 的 大 小 ， 即 该 输入 区 域 显示 在 页 面 的 内 容 
"CT | 包含 多 少 行 和 多 少 列 
WRAP 用 于 设置 输入 区 的 换行 方式 ， 即 是 否 自动 换行 
附 表 B.8 表格 


表示 在 页 面 创建 一 个 表格 ， 在 其 中 将 包括 TR 和 TD 标签 ，TR 标 签 用 于 
中 的 行 数 ， 而 TD 则 表示 表格 中 的 列 

BORDER | 设置 表格 的 边框 粗细 ， 如 果 设置 为 0， 则 不 显示 边框 
BORDERCOLOR | 设置 表格 的 边框 颜色 

BORDERCOLORLIGHT | 设置 表格 的 亮 边框 颜色 

BORDERCOLORDARK | 设置 表格 的 暗 边框 颜色 

在 TABLE 标 签 内 使 用 ， 可 以 设置 表格 的 显示 宽度 。 另 外 ， 该 标签 也 可 以 用 在 
TR 和 TD 标签 内 ， 用 于 设置 行 或 者 单元 格 的 宽度 


F 设 置 表格 


TABLE、 TR TD 
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( 续 表 ) 
标签 说 明 
HEIGHT 人 可 以 设置 表格 的 高 度 ， 该 标签 同样 可 以 用 于 TR 和 TD 标 
BGCOLOR 在 TABLE 标 签 内 使 用 ， 设 置 表格 背景 
AG A 可 以 设置 表格 的 背景 图 像 ， 它 的 优先 级 高 于 GCOLOR 
CELLSPACING 在 TABLE 标 签 内 使 用 ， 可 以 设置 表格 内 框 的 宽度 
CELLPADDING 在 TABLE 标 签 内 使 用 ， 可 以 设置 文字 与 边框 之 间 的 距离 
ALIGN 在 TABLE 标 签 内 使 用 ， 可 以 设置 表格 的 对 齐 方 式 
COLSPAN 设置 单元 格 的 水 平 跨度 
ROWSPAN 设置 单元 格 的 垂直 跨度 
NOWRAP 用 在 TD 标签 内 ， 设 置 单 元 格 内 的 文字 内 容 不 自动 换行 
THEAD 为 表格 设置 表 首 ， 常 常 与 TH 标签 一 起 使 用 ， 用 于 突出 显示 表格 的 首 行 ， 如 列 
名 、 数 据 项 名 称 ;也 可 以 与 COLSPAN 标 签 合 用 ， 对 表格 进行 内 容 分 类 
TBODY 为 表格 设置 主体 区 域 
TFOOT 为 表格 设置 表 尾 
TH 为 表格 设置 表 头 
CAPTION 为 表格 添加 标题 单元 格 ， 一 般 设置 在 表格 上 方 
ALIGN 设置 表格 标题 文字 的 水 平 对 齐 方 式 
VALIGN 设置 表格 标题 文字 的 垂直 对 齐 方式 
附 表 B.9 框架 标签 
标签 说 明 
FRAMESET 在 页 面 中 设置 框架 ， 框 架 中 需要 包含 对 象 ， 即 框架 文件 FRAME。 一 般 来 说 ， 
FRAMESET 标 签 中 a 含 了 几 个 对 象 ， 就 要 有 几 个 FRAME 标签 
ROWS 将 框架 窗口 上 下 排列 ， 并 设置 各 个 窗口 显示 的 比例 
COLS 将 框架 窗口 左右 排列 ， 并 设置 各 个 窗口 显示 的 比例 
FRAMEBORDER 在 FRAMESET 标 签 内 使 用 ， 设 置 框架 窗口 的 边框 
FRAMESPACING 在 FRAMESET 标 签 内 使 用 ， 设 置 框架 的 边框 宽度 
BORDERCOLOR 在 FRAMESET 标 签 内 使 用 ， 设 置 框架 的 边框 颜色 
SRC 在 FRAME 标签 内 使 用 ， 设 置 框架 窗口 的 页 面 源 文件 
NAME 在 FRAME 标签 内 使 用 ， 设 置 框架 窗口 的 名 称 ， 一 般 用 于 区 分 各 个 框架 窗口 
SCROLLING 在 FRAME 标签 内 使 用 ， 设 置 框架 滚动 条 的 显示 效果 
MARGINWIDTH 在 FRAME 标签 内 使 用 ， 设 置 框架 的 边缘 宽度 
MARGINHEIGHT 在 FRAME 标签 内 使 用 ， 设 置 框架 的 边缘 高 度 
NORESIZE 将 框架 设置 为 禁止 调整 窗口 的 尺寸 
NEN 人 这 样 当 在 不 支持 框架 页 面 的 浏览 器 中 显示 页 面 时 ， 
IFRAME 插入 浮动 框架 
SRC 在 IFRAME 标 签 内 使 用 ， 设 置 浮动 框架 的 页 面 源 文件 
WIDTH、HEIGHT 在 IFRAME 标 签 内 使 用 ， 设 置 浮动 框架 的 大 小 
ALIGN 设置 浮动 框架 的 对 齐 方式 
FRAMEBORDER 设置 浮动 的 边框 显示 属性 
MARGINWIDTH 设置 浮动 框架 边缘 的 宽度 
MARGINHEIGHT 设置 浮动 框架 边缘 的 高 度 
SCROLLING 设置 浮动 框架 滚动 条 的 效果 
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